AngularJS Memory Leak Playground (example with select)

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}}
    <select name="selectName" ng-change="goToNamePage()" ng-model="name">
        <option value="">Please, select!</option>
        <option value="sam">Sam</option>
        <option value="max">Max</option>
        <option value="joe">Joe</option>
    </select>
</script>
<script type="text/ng-template" id="name.html">
    {{msg}}
</script>

<div class="main">
    <ul class="menu">
        <li><a href="#/this">This</a></li>
        <li><a href="#/that">That</a></li>
        <li><a href="#/sam">Sam</a></li>
        <li><a href="#/max">Max</a></li>
        <li><a href="#/joe">Joe</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, $location ) {
    $scope.msg = 'Welcome to another world!';
    $scope.name = '';
    $scope.goToNamePage = function() {
        $location.path('/' + $scope.name);
    }
});
app.controller( 'NameCtrl', function ( $scope, $location ) {
    var nameLower = $location.path().substring(1);
    var name = nameLower.substring(0, 1).toUpperCase() + nameLower.substring(1);
    $scope.msg = 'Hello, ' + name + '!';
});

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