AnguarJS Routing Not Working As Expected
<p>I have a listing of blog posts and I want to be able to click on the title and have it dynamically redirect to the proper posting. </p>

<p>So far it works except when I click on the anchor tagged title it redirects to: </p>

<pre><code>blog/#/post/:post
</code></pre>

<p>rather than</p>

<pre><code>blog#/post/:post
</code></pre>

<p>I've tried to change the href to data-ng-href,
using target="_self"
and tried changing the href="#/post/{{post}}" and href="/post/{{post}}"</p>

<p>Routes:</p>

<pre><code>(function(){

    'use strict';

    angular.module('ghpg')
    .config(Config); 

    Config.$inject = ['$routeProvider'];

    function Config($routeProvider){

        $routeProvider
            .when('/listing', {
                templateUrl: '/angular/views/listing.client.view.html'
            }).otherwise({
                redirectTo:'/'
            }).when('/post/:title',{
                templateUrl: '/angular/views/post.client.view.html',
                controller: 'postController',
                controllerAs: 'post'
            }).otherwise({
                redirectTo:'/listing'
            });

    }  


})();
</code></pre>

<p>Listing View:</p>

<pre><code>    (function(){

    'use strict'; 

    angular
    .module('ghpg')
    .controller('listingController', listingController); 

    listingController.$inject = ['$scope', 'blogContent'];//,'blogContent'] //, 'blogContent'];  


    ////

    function listingController($scope,  blogContent){
        var vm = this;
        vm.articles = [];
        grabData();   

        function grabData(){
            return blogContent.getContent().then(function(data){
                    console.log(data.articles);
                    vm.articles = data.articles;
                    return vm.articles; 
                    },function(err){ 
                console.log(err); 
                vm.data = [];

                }); 
        }

    }


})(); 
</code></pre>

<p>App.js:</p>

<pre><code>(function(){

    'use strict'; 

    var dependencies = [
        'ghpg', 
        'ngRoute'

    ];  

    angular.module('blogger', dependencies)
    .config(Config);  

    Config.$inject = ['$locationProvider'] 

    function Config($locationProvider){

        $locationProvider.hashPrefix('!'); 

    } 

    if (window.location.hash === '#_=_'){
        window.location.hash = '#!'; 

    } 


    //bootstrap angular

    angular.element(document).ready(function(){

        angular.bootstrap(document, ['ghpg']); 

    });



})();
</code></pre>

<p>LISTING VIEW: </p>

<pre><code>&lt;div class="container-fluid" data-ng-Controller="listingController as vm"&gt; 
    &lt;h2&gt; Listings &lt;/h2&gt;     
    &lt;div class="row"&gt;
        &lt;div class="col-md-4"&gt;&lt;/div&gt;
        &lt;div class="col-md-8"&gt;      
            &lt;div class="post-listing" data-ng-repeat="post in vm.articles"&gt; 
                &lt;h3 class="article-title"&gt;&lt;a target="_self" data-ng-href="/blog#/post/{{post.title}}"&gt; {{ post.title  }} &lt;/a&gt;&lt;/h3&gt;
                &lt;div class="article-container"&gt;
                    &lt;div class="article-date"&gt;&lt;span class="article-date"&gt;{{ post.date }}&lt;/span&gt;&lt;/div&gt;
                    &lt;div class="article-post&gt;"&gt;&lt;span class="article-content"&gt; {{ post.content }} &lt;/span&gt;&lt;/div&gt; 
                &lt;/div&gt; 
            &lt;/div&gt;
        &lt;/div&gt;  
    &lt;/div&gt;  

&lt;/div&gt; 
</code></pre>

<p>Having trouble where I went wrong. I strongly suspect that it's some small typo or something with my SPA location/locationProvider in app.js but it looks the same in my other apps, unless my eyes are fooling me (which could be totally happening!) </p>