title: Angularjs - Custom directive cannot access controller scope
body: <p>I am building a single page app with Angular JS. The problem is the custom directive mySlider cannot access the scope of the controllers I assign to the template. Is there a way to solve this problem? Here are my files</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;script src="js/dishesapp.js"&gt;&lt;/script&gt;
  &lt;div ng-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>partials/dishestemplate.html</p>
  
  <pre><code>&lt;div my-slider&gt;&lt;/div&gt;
  </code></pre>
  
  <p>directives/slider.html</p>
  
  <pre><code>&lt;div id="dishsliderholder"&gt;
      &lt;ul class="bxslider"&gt;
          &lt;li class="dishdetails" ng-repeat="dish in dishes"&gt;
              &lt;div class="item"&gt;                               
                  &lt;div class="title"&gt;{{dish.name}}&lt;/div&gt;                  
                  &lt;div class="description"&gt;{{dish.description}}&lt;/div&gt;                               
              &lt;/div&gt;
          &lt;/li&gt;     
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>dishesapp.js</p>
  
  <pre><code>var dishesApp = angular.module('dishesApp', ['ngRoute']);
      dishesApp.config(function ($routeProvider) {
      $routeProvider
              .when('/', {templateUrl: 'partials/default.html'})
              .when('/Noodles', {templateUrl: 'partials/dishtemplate.html', controller: 'NoodlesCtrl'})
              .when('/Rolls', {templateUrl: 'partials/dishtemplate.html', controller: 'RollsCtrl'})
              .when('/Pancakes', {templateUrl: 'partials/dishtemplate.html', controller: 'PancakesCtrl'})
              .when('/Rice', {templateUrl: 'partials/dishtemplate.html', controller: 'RiceCtrl'})
              .when('/FamilyStyle', {templateUrl: 'partials/dishtemplate.html', controller: 'FamilyStyleCtrl'})
              .when('/Others', {templateUrl: 'partials/dishtemplate.html', controller: 'OthersCtrl'})
              .otherwise({redirectTo: '/'});
      });
  
      dishesApp.controller('NoodlesCtrl', function ($scope, $http) {
  
          $scope.mycategory = "Noodles";
              $http.get("http://www.blabla.com/Data/dishes.php").success(function (response) {
              $scope.dishes = response.records;
          });
      });
  
  dishesApp.controller('RollsCtrl', function ($scope, $http) {
  
          $scope.mycategory = "Rolls";
              $http.get("http://www.blabla.com/Data/dishes.php").success(function (response) {
              $scope.dishes = response.records;
          });
      });
  
  ……………..
  
  
      dishesApp.directive('mySlider', function() {
          return {
              restrict: 'A',
              templateUrl: 'directives/slider.html',
              link: function (scope, element, attrs) {              
                      angular.element( document.querySelector('.bxslider')).bxSlider();
                       angular.element( document.querySelector('#dishsliderholder')).css("background-size", getSliderHolderBackgroundSize());
              }
          };
  });
  </code></pre>