AngularJS Memory Leak Playground (example with ng-repeat)

Playground for detecting potential memory leaks when using AngularJS. Simple example, no memory leak.

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}}
    <table>
        <tr ng-repeat="name in list">
            <td>{{name}}</td>
        </tr>
    </table>
</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;
}
td {
    border: 1px solid lightgrey;
}

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.list = ['Sam', 'Max', 'Joe'];
});

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