title: AngularJS controller is being called twice
body: <p>I new in AngularJS. I am learning AngularJS. I am trying to follow different tutorials. I working with some codes now. I have a question in this regard. My codes ares as below</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;html ng-app="main_app"&gt;
      &lt;head&gt;
          &lt;title&gt;AngularJS Application&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width"&gt;   
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"&gt;&lt;/script&gt;
          &lt;script src="js/route.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-controller="main_controller"&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>route.js</p>
  
  <pre><code>var app = angular.module('main_app',['ngRoute']);
  
  app.config(function($routeProvider)
  {
     $routeProvider
  
     // route for the home page
     .when('/', {
                 templateUrl : 'pages/home.html',
                 controller  : 'main_controller'
              });
  });
  
  app.controller('main_controller', function($scope) 
  {
      alert('Yes');        
  });
  </code></pre>
  
  <p>If I run this code I get the <code>alert('Yes');</code> twice.</p>
  
  <p>Why I am getting this alert twice ??  Is it normal action or I am doing something wrong ??</p>
  
  <p>Thanks</p>
  
  <p><strong>Update</strong></p>
  
  <p><strong>@Leo Farmer</strong> I changed structure of <em>index.html</em> as belows</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;AngularJS Application&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width"&gt;   
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"&gt;&lt;/script&gt;
          &lt;script src="js/route.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div ng-app="main_app"&gt;
              &lt;div ng-controller="main_controller"&gt;
                  &lt;div ng-view&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;                
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But still I am getting <strong>alert()</strong> twice. Actually my concern is "Am I doing wrong or right ??" I think getting <strong>alert()</strong> twice means I am doing something wrong.</p>
  
  <p>Is my structure following good convention ??</p>
  
  <p>Thanks</p>