duplicate controllers being created by ng-include directive - angularjs

Question

I'm using the ngInclude directive and defining my own controller
<ng-include
src="'app/streaming/streaming.view.html'"
ng-controller="StreamingCtrl"
ng-if="streamingActive">
</ng-include>
This is defined within main-page.view.html which is the top level page for my app and is listed in app.js as follows:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/common/main-page.view.html',
controller: 'HomeCtrl',
reloadOnSearch:false
})
.when('/multiview', {
templateUrl: 'app/common/main-page.view.html',
controller: 'MultiviewCtrl'
})
}]);
The streaming control is as follows:
app.controller('StreamingCtrl', ['$scope', function($scope) {
console.log($scope);
$scope.$on('destroy', function () {
console.log('destroy');
});
}]);
Everytime I navigate between the home and multiview pages it looks like a new instance of the controller is being created. The scope is logged and each one has a new id but it seems like the destroy method is never call. I think that this is causing a memory leak with new controller instances being created while the old ones are never destroyed.
Any thoughts greatly appreciated
C

Answer 1

This is because you have mispelled the destroy event, it should be $destroy instead of destroy.
DEMO
.controller('StreamCtrl', function($scope) {
console.log($scope);
$scope.$on('$destroy', function () {
console.log('destroy');
});
});