title: AngularJS - slider.noUiSlider is not a function
body: <p><strong>Question Background:</strong></p>
  
  <p>I am attempting to implement this following Range Slider (NoUiSlider) in my Angular app:</p>
  
  <p><a href="http://vasyabigi.github.io/angular-nouislider/" rel="nofollow">http://vasyabigi.github.io/angular-nouislider/</a></p>
  
  <p><strong>The Issue:</strong></p>
  
  <p>I have implemented the code as required but have multiple errors in Chrome's console relating to this slider.</p>
  
  <p><strong>The console errors will be shown below the following source code</strong></p>
  
  <p>This is the code from the Angular app:</p>
  
  <p>App.js showing the 'nouislider' dependancy:</p>
  
  <pre><code>  angular
    .module('app', [
      'ui.router',
      'ui.bootstrap',
      'ngResource',
      'nouislider'
    ])
    .config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
  
        $urlRouterProvider.otherwise('/');
        $stateProvider
          .state('home', {
              url: '/',
              templateUrl: 'home.html',
              controller: 'HomeController'
          })
          .state('update', {
              url: '/update',
              templateUrl: 'Update.html',
              controller: 'UpdateController'
          })
        }]);
  
      var app = angular.module('app');
  </code></pre>
  
  <p>Update Controller which contains Scope properties relating to the slider:</p>
  
  <pre><code>    app.controller('UpdateController', function ($scope, searchService) {
      $scope.searchingService = searchService;
  
      $scope.test = { 'single': 0, 'to': 0, 'from': 0 };
  
      $scope.searchFormUpdate = {};
  
      $scope.hideSearch = true;
  
      $scope.search = function () {
  
          $scope.searchingService.updateSearchList(
            $scope.searchFormUpdate.item,
            $scope.searchFormUpdate.catagory,
            $scope.searchFormUpdate.country);
  
      }
  
      $scope.items = [];
      $scope.currentPage = 1,
        $scope.numPerPage = 10,
        $scope.maxSize = 5;
  
      $scope.$watchCollection('searchingService.searchList', function (newVal, oldVal) {
          $scope.searchingService.searchList = newVal;
          $scope.items = [];
  
          for (i = 1; i &lt;= $scope.searchingService.searchList.length; i++) {
              $scope.items.push($scope.searchingService.searchList[i]);
          }
  
          $scope.filterItems();
  
      })
  
      $scope.$watch('currentPage + numPerPage', function () {
          $scope.filterItems();
      });
  
      $scope.filterItems = function () {
          var begin = (($scope.currentPage - 1) * $scope.numPerPage),
            end = begin + $scope.numPerPage;
  
          $scope.searchingService.filteredItems = $scope.searchingService.searchList.slice(begin, end);
      }  
  });
  </code></pre>
  
  <p>Update.html View:</p>
  
  <pre><code>&lt;div ng-controller="UpdateController" ng-show="hideSearch"&gt;
      &lt;div class="form-group"&gt;
          &lt;div slider ng-model="test.single" start=1 end=10&gt;&lt;/div&gt;
          &lt;div slider ng-from="test.from" ng-to="test.to" start=0 end=100 step=5&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Chrome Errors from the Console:</p>
  
  <pre><code>angular.js:10147 TypeError: slider.noUiSlider is not a function
      at link (http://localhost:55315/Scripts/bower_components/angular-nouislider/src/nouislider.js:63:16)
      at http://localhost:55315/Scripts/bower_components/angular/angular.js:7170:44
      at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6768:13)
      at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
      at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6158:13)
      at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
      at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
      at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
      at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
      at publicLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6051:30) &lt;div slider="" ng-model="test.single" start="1" end="10" class="ng-isolate-scope ng-pristine ng-valid"&gt;(anonymous function) @ angular.js:10147
  
  angular.js:10147 TypeError: slider.noUiSlider is not a function
      at link (http://localhost:55315/Scripts/bower_components/angular-nouislider/src/nouislider.js:22:16)
      at http://localhost:55315/Scripts/bower_components/angular/angular.js:7170:44
      at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6768:13)
      at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
      at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6158:13)
      at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
      at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
      at nodeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6762:24)
      at compositeLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6155:13)
      at publicLinkFn (http://localhost:55315/Scripts/bower_components/angular/angular.js:6051:30) &lt;div slider="" ng-from="test.from" ng-to="test.to" start="0" end="100" step="5" class="ng-isolate-scope"&gt;
  </code></pre>
  
  <p>Currently I'm not sure how to go about fixing the 'slider.noUiSlider is not a function' errors. I have angular included in my app and this NoUiSlider is the only part that is currently not working.</p>
  
  <p>Any help working out from these errors why the slider wont work will be greatly appreciated.</p>