AngularJS directive that watches for attribute change

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

app.directive('activity',function() {
    return {
        restrict: 'A',
        scope: {
            activity: '='
        },
        link: function(scope, element, attrs) {
           scope.$watch('activity', function(val) {
             console.log(val);
           })
        }
    };
});

  


app.controller('MainCtrl', function($scope){ 
     $scope.isBusy = false;
     $scope.toggle = function() {
       $scope.isBusy = !$scope.isBusy;
     }
});

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div ng-controller="MainCtrl">
       <p activity='isBusy'></p>
       <button ng-click='toggle()'>Toggle busy</button>
       <p>isBusy: {{ isBusy }}</p>
  </div>
</body>
</html>

/* Put your css in here */