JSFiddle - React, Tailwind, and code Playground

by Ryan Clark

HTML

<div ng-app="app">
    <test-directive>
        <a href="" ng-click="removeWatcher();">Remove Watcher</a>
    </test-directive>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.3.0-beta.7/angular.js"></script>
</style>

JavaScript

(function () {
    
    angular
        .module('app', [])
        .directive('testDirective', testDirective);
    
    function testDirective () {
        return {
            restrict: 'EA',
            replace: true,
            scope: true,
            controller: function ($scope, $timeout) {
                $scope.name = 'Ryan';
                
                var watcher = $scope.$watch( function( ) {
                    return $scope.name; 
                }, function( newValue, oldValue ) {
                    console.log('$scope.name was updated!');
                } );
                
                console.log($scope);
                
                $scope.removeWatcher = function() {
                    watcher();
                    
                    console.log($scope);
                };
            }
        };
    }
    
})();