title: Angularjs Controller Called Twice?
body: <p>I have called the data from server using <code>ngResource</code>. however, i have figured out that for some reason, my controller is called twice. <br />
  Here is my code;</p>
  
  <p>App.js file</p>
  
  <pre><code>// declare a module
  var blogApp = angular.module('blogApp', ['ngResource']);
  </code></pre>
  
  <p>HomeController.js file;</p>
  
  <pre><code>blogApp.controller("HomeController", function ($scope, $resource) {
      var HotNews = $resource('/api/article/hotnews?culture=en-US');
      $scope.news = HotNews.query();
      alert("hello"); //here i see hello alert box two times
  });
  </code></pre>
  
  <p>my view;</p>
  
  <pre><code>  &lt;ul id="news" data-ng-controller="HomeController"&gt;
        &lt;li data-ng-repeat="headline in news"&gt;
            {{headline.description}}
            &lt;a href="#" title="Read More"&gt;» more&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Updated:</strong> the issue is in <code>fancybox.js</code> file that is in main layout;</p>
  
  <pre><code>&lt;html data-ng-app="blogApp"&gt;
  </code></pre>
  
  <p>the source files are;</p>
  
  <pre><code>    &lt;!-- JS --&gt;
  &lt;script src="/Content/scripts/lib/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="/Content/scripts/lib/angular-resource.min.js"&gt;&lt;/script&gt;
  &lt;script src="/Content/scripts/app/app.js"&gt;&lt;/script&gt;
  &lt;script src="/Content/scripts/app/controllers/HomeController.js"&gt;&lt;/script&gt;
  @Scripts.Render("~/bundles/jquery")
  &lt;script src="/content/fancybox/jquery.fancybox-1.3.4.pack.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>when i comment out the fancybox, all works fine but when i add it back, i get two times alert box;</strong></p>