Updating Parent Scope

http://angularjs.org/

by Divya Manu

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div ng-app="myApp"  id="tableForVxp" class="dataDisplay2">
<section ng-controller="mainController">
    <loading ng-show="loading">
        loading?
    </loading>
    <button ng-click="updateTest()">Force update</button>
</section>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('mainController', function($scope) {
    $scope.loading = true;
    $scope.updateTest = function(){
        if( $scope.loading)
        $scope.loading = false;
        else
           $scope.loading = true;  
    }
}).directive('loading', function() {
    return {
        restrict : 'E',
        
        link : function(scope, element, attrs) {
            scope.$watch('loading', function(ctx) {
                console.log('updating?', ctx)
            });
        }
    }
});