Angular controller throwing $injector error

Question

Im trying to create my first slider with Angular. The error I'm receiving is informing me that $watch might not be properly injected.. Here is the error:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.4/$injector/unpr?p0=%24watchProvider%20%3C-%20%24watch%20%3C-%20sliderCtrl
    at Error (native)
    at http://localhost:9999/bower_components/angular/angular.min.js:6:416
    at http://localhost:9999/bower_components/angular/angular.min.js:40:307
    at Object.d [as get] (http://localhost:9999/bower_components/angular/angular.min.js:38:308)
    at http://localhost:9999/bower_components/angular/angular.min.js:40:381
    at d (http://localhost:9999/bower_components/angular/angular.min.js:38:308)
    at Object.e [as invoke] (http://localhost:9999/bower_components/angular/angular.min.js:39:64)
    at b.$get.Q.instance (http://localhost:9999/bower_components/angular/angular.min.js:80:151)
    at K (http://localhost:9999/bower_components/angular/angular.min.js:61:140)
    at http://localhost:9999/bower_components/angular/angular.min.js:68:475

When I click on the error link:

Unknown provider: $watchProvider <- $watch <- sliderCtrl

Controller:

myApp.controller('sliderCtrl', ['$scope', '$watch', function($scope, $watch){
    // Create an array of slide images
    $scope.sliderImages = [
        { image: '../../public/assets/img/joker2.jpg', description: 'Image 1' },
        { image: '../../public/assets/img/batman1.jpg', description: 'Image 2' },
        { image: '../../public/assets/img/joker1.jpg', description: 'Image 3' }
    ];

    // Initially the index is at the first image
    $scope.currentIndex = 0;

    //Display next image in array
    $scope.next = function(){
        $scope.currentIndex < $scope.sliderImages.length - 1 ? $scope.currentIndex++ : $scope.currentIndex = 0;
    };

    //Display prev image in array
    $scope.prev = function() {
        $scope.currentIndex > 0 ? $scope.currentIndex-- : $scope.currentIndex = $scope.sliderImages.length - 1;
    };

    $scope.$watch('currentIndex', function() {
        $scope.sliderImages.forEach(function(image) {
            // make every image invisible
            image.visible = false;
        });
        // make the current image visible
        $scope.sliderImages[$scope.currentIndex].visible = true;
    });
}]);

Directive:

myApp.directive('slider', [ '$timeout',
    function($timeout) {
        return {
            scope: {},
            restrict: 'E',
            controller: 'sliderCtrl',
            templateUrl: 'public/views/partials/slider.html'
        }
    }
]);

Partial:

<p class="component-example-header">Creating a slider with ngAnimate</p>
<div class="slider">
    <div class="slide" ng-show="slide.image.visible">
        <img width="500px" height="250px" ng-repeat="slide in sliderImages" ng-src="{{slide.image}}">
    </div>
    <div class="slide-navifation">
        <a href="#" ng-click="prev()"><</a><br>
        <a href="#" ng-click="next()">></a>
    </div>
</div>

doldt · Accepted Answer · 2015-09-03 23:31:31Z

5

You don't have to inject $watch, it's an attribute of the injected $scope.

Just omit that part of the controller declaration, as such:

myApp.controller('sliderCtrl', ['$scope', function($scope){/*...*/

(You're getting this error because angular is looking for an injectable by the name $watch, because you specified it as a parameter for the controller function. As a rule of thumb, if you want to use the object.property syntax, it's the object you have to require for injection, not the property -- in this case, $scope for $scope.$watch)

edited Sep 3, 2015 at 23:31

answered Sep 3, 2015 at 23:26

doldt

4,5063 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Over a year ago

Thank you! That fixed my error. I didnt know that $watch was a property of $scope. I though it was it's own object. Learning Angular is fun :)

Collectives™ on Stack Overflow

Angular controller throwing $injector error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related