$watch function in directive not getting triggered in Angular JS

Question

$watch function in directive not getting triggered in Angular JS

I'm new to angular js and have been looking everywhere for an answer to why this isn't working.

I have my directive here:

.directive('carrouselPreview', function () {
    return function (scope, element, attrs) {
        scope.$watch(scope.carouselPreview, function () {
            alert('changed');
        }, true);
    }
});

This watches for a change to scope.carouselPreview, which is changed through this function:

$scope.showPreview = function(ind){
    $scope.carouselPreview = ind;
}

This function definitely fires and changes scope.carouselPreview - but the watch function never fires!

I realise I'm probably being dumb here but I've looked all over and it seems perfectly fine.

If anyone helps me fix this tonight I'll love you forever!

javascript
angularjs

Answer 1

The first parameter into the $watch is a string (evaluated in the context of the scope) or a function. So what you want is:

scope.$watch("carouselPreview", function () {
    alert('changed');
}, true);

See http://docs.angularjs.org/api/ng.$rootScope.Scope#$watch