AngularJS Memory Leak Playground (watching directive with a button)

Playground for detecting potential memory leaks when using AngularJS. Example with button and watching directive.

by bjoerne

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script type="text/ng-template" id="this.html">
    {{msg}}
</script>
<script type="text/ng-template" id="that.html">
    {{msg}}
    <button ng-click="log()" log-me="logMsg">Log me!</button>
</script>

<div class="main">
  <ul class="menu">
    <li><a href="#/this">This</a></li>
    <li><a href="#/that">That</a></li>
  </ul>
  <ng-view></ng-view>
</div>

CSS

.main {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    padding: 10px;
}
.menu {
    margin-bottom: 10px;
}
.menu li {
    display: inline;
}

JavaScript

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

app.controller( 'ThisCtrl', function ( $scope ) {
    $scope.msg = 'Hello, World!';
});
app.controller( 'ThatCtrl', function ( $scope ) {
    $scope.msg = 'Welcome to another world!';
    $scope.log = function() {
        $scope.logMsg = new Date().getTime();
    };
});

app.config( function ( $routeProvider ) {
  $routeProvider
    .when( '/this', { templateUrl: 'this.html', controller: 'ThisCtrl' } )
    .when( '/that', { templateUrl: 'that.html', controller: 'ThatCtrl' } )
    .otherwise( { redirectTo: '/this' } );
});

app.directive('logMe', function() {
    return function($scope, $element, $attributes) {
        $scope.$watch($attributes.logMe, function(newValue) {
            if (newValue) {
                console.log(newValue);
            }
        });
    }
});