title: Routes loaded from an api - controller never called
body: <p>I'm trying to load routes into my angularJS app by running an ajax call and setting up routes on my RouteProvidor. The following is my code to do so.</p>
  
  <pre><code>var app = angular.module('app', ['ngRoute']);
  var appRouteProvider;
  
  app.config(['$routeProvider', '$locationProvider', 
                        function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode({  
      enabled: true,
      requireBase: false
    });
    appRouteProvider = $routeProvider;
  
    appRouteProvider.when('/', {
      templateUrl : '../../app/templates/home.html',
      controller  : 'IndexController'
    });
  
  }]).run(function($http, $route){
  
    url = siteApiRoot+'api/routes';
  
    $http.post(url, jQuery.param([]), {
        method: "POST",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      }
    ).success(function(data){
  
      for(i in data){
          appRouteProvider.when(data[i].route, {
              templateUrl : data[i].template,
              controller  : data[i].controller
          });
      }
  
      console.log($route.routes);
  
    });
  });
  </code></pre>
  
  <p>The console.log outputs a correct set of routes to the console which seems to indicate that the routes have been correctly assigned. But if I were to open any url that should be handled by the route. Nothing happens. The basic assets load i.e. navigation bar and footer which are constant throughout but the controller for the route is never called. What am I missing here guys.</p>
  
  <p>-- UPDATE</p>
  
  <p>Tehcnically I have routes that follow the following patterns:</p>
  
  <p>List of entries:</p>
  
  <pre><code>/&lt;city&gt;/&lt;category&gt;
  /&lt;city&gt;/&lt;subdistrict&gt;-&lt;category&gt;
  /&lt;city&gt;/&lt;entry-slug&gt;
  </code></pre>
  
  <p>I'm not sure how well to define the above - basically the first two routes would invoke one controller and one view while the third woudl invoke another. However I'm stuck with how to define this kind of routing in AngularJS provided that   etc are all slugs in a database. Pretty much left with hardcoding an array of routes but that also doesn't work as it seems.</p>
  
  <p>Plus I also have other pages that are static - eg /about /site/contact - a bit lost on routing here. </p>