title: AngularJS directive vs routeProvider
body: <p>I have a problem with my directive. Actually my routeProvider is not being fired when the $location changes my url path.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>var appPath = location.pathname;
  var bdaApp = angular.module('bdaApp', ['ui.bootstrap', 'ngResource', 'ngRoute', 
                                         'homeController', 'itemController', 'userController', 
                                         'eildController']);
  
      bdaApp.config(['$routeProvider', function($routeProvider) {
  
          $routeProvider
              .when('/', { templateUrl : 'layout/home', controller : 'HomeListController'})
              .when('/item', { templateUrl : 'layout/item', controller : 'ItemListController'})
              .when('/user', { templateUrl : 'layout/user', controller : 'UserListController'})
  
              .when('/eild/consultar', { templateUrl : 'eild/layout', controller : 'EildListController'})
              .when('/eild/detalhes/:bilhetePedido', {templateUrl : 'eild/detalhes', controller : 'EildDetailController'});
  
      }]);
  
      bdaApp.directive('myDirective', ['$location', function($location) {
          return {
              restrict: 'A',
              template:
                      '&lt;ul class="nav navbar-nav"&gt;' +
                      '   &lt;li ng-repeat="p in parents" class="dropdown"&gt;' +
                      '       &lt;a ng-click="go(p.path)" class="dropdown-toggle"&gt;' +
                      '           {{p.nome}}' +
                      '           &lt;b ng-show="p.menus.length &gt; 0" class="caret"&gt;&lt;/b&gt;' +
                      '       &lt;/a&gt;' +
                      '       &lt;ul ng-show="p.menus.length &gt; 0" class="dropdown-menu"&gt;' +
                      '           &lt;li ng-repeat="s in p.menus"&gt;' +
                      '               &lt;a ng-click="go(s.path)"&gt;{{s.nome}}&lt;/a&gt;' +
                      '           &lt;/li&gt;' +
                      '       &lt;/ul&gt;' +
                      '   &lt;/li&gt;' +
                      '&lt;/ul&gt;',
              controller: ['$scope', '$resource', function($scope, $resource) {
  
                  $scope.getItems = function() {
                      $resource(appPath + 'menus/teste').query(function(data) {
                          $scope.parents = data;
                      });
                  };
              }],
              link: function(scope, iElement, iAttrs) {
                  scope.getItems();
                  scope.$watch('parents', function(newVal) {});
  
                  scope.go = function(path) {
                      if (path != null) {
                          $location.path(path);
                      }
                  };
                  scope.$watch('go', function(newVal) {});
              }
          };
      }]);
  </code></pre>
  
  <p>and my html</p>
  
  <pre><code>&lt;div&gt;
      &lt;div my-directive items="items"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>when I click on any link, it calls my "go" function, change my url to "<code>http://localhost:8080/bda-web/#/item</code>", but does not change the page. So I assume my routeProvider is not being called through my directive.</p>
  
  <p>I also tried to externalize my function like</p>
  
  <pre><code>bdaApp.controller('MenuController', ['$scope', '$location', function($scope, $location) {
      $scope.go = function(path) {
          if (path != null) {
              alert(path);
              $location.path(path);
          }
      };
  }]);
  </code></pre>
  
  <p>but I couldn't do this work.</p>
  
  <p>Anyway, any suggestion?</p>
  
  <p>Thanks</p>