title: Angularjs: Controller is called multiple times
body: <p>For some reason, my controller is double called, when I switch between resource 1 and resource2.</p>
  
  <p>Here's the code:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="multiple_calls"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;AngularJS Plunker&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MainCtrl"&gt;
      &lt;a href="#res/1"&gt;1&lt;/a&gt;
      &lt;a href="#res/2"&gt;2&lt;/a&gt;
  
      &lt;div ng-view&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('multiple_calls', []);
  
  app.
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/res/:id', {templateUrl: 'res.html',
                          controller: 'res'
        });
  }]);
  
  
  app.controller('MainCtrl', function($scope) {
  });
  
  app.controller('res', function($scope, $routeParams) {
    console.log('resource called')
    $scope.id = $routeParams.id;
  });
  </code></pre>
  
  <p><strong>res.html</strong></p>
  
  <pre><code>{{id}}
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/HsCJmbllOcnlvlc1oiHa?p=preview" rel="noreferrer">http://plnkr.co/edit/HsCJmbllOcnlvlc1oiHa?p=preview</a></p>
  
  <p>If you click item 1 and then 2, you'll see that "resource called" is printed 3 times: 2 times for each change between resources.</p>
  
  <p>Any clues why this happens?</p>