title: AngularJS Controller execute twice
body: <p>I must add I am working on Sharepoint 2013, visual web part.
  my ascx:</p>
  
  <pre><code>&lt;%@ Control Language="C#" Inherits="SharePoint.BLL.UserControls.VODCatalog, SharePoint.BLL, Version=1.0.0.0, Culture=neutral, PublicKeyToken=81fc048468441ab3" %&gt;
  &lt;%@ Register TagPrefix="SPWP" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %&gt;
  &lt;%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"  Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %&gt;
  
  
  &lt;div ng-app="VODCatalogModule"&gt;
      &lt;div class="wrapper" ng-view=""&gt;   
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My JS:</p>
  
  <pre><code>var VODCatalogModule = angular.module('VODCatalogModule', []);
  
  var testWPDefinedView = 'TopLevelView';
  
  VODCatalogModule.config(function ($routeProvider) {
      $routeProvider.when('/TopLevelView', { controller: 'VODCatalogController', templateUrl: '/_catalogs/masterpage/html/VODCatalog_TopLevelView.html' })
                    .when('/LowLevelView', { controller: 'VODCatalogController', templateUrl: '/_catalogs/masterpage/html/VODCatalog_LowLevelView.html' })
                    .otherwise({ redirectTo: '/' + testWPDefinedView });
  });
  
  function VODCatalogController($scope, $http) {
      $scope.VODCatalogLevel = 1;
      $scope.BreadCrumbs = [];
      $scope.MainCatalog = [];
      $scope.NavCatalog = [];
      $scope.crumbsVisible = $scope.BreadCrumbs.length == 0 ? "hidden" : "";
  
      var getVODCatalogData = function (PARENT_VOD_CATALOG_GK, vodLevel) {
          var url = "VODCatalogHandler.ashx?action=GetVODCatalogData&amp;vodLevel=" + vodLevel;
          if (PARENT_VOD_CATALOG_GK)
              url += "&amp;PARENT_VOD_CATALOG_GK=" + PARENT_VOD_CATALOG_GK;
          $http.get(url, { cache: true })
              .success(function (data, status, headers, config) {
                  setVODCatalogData(data, vodLevel);
              }).error(function (data, status, headers, config) {
                  alert('ERROR in VODCatalogDataService get');
              });
      };
  
      var setVODCatalogData = function (data, vodLevel) {
          $scope.BreadCrumbs = data;
          $scope.MainCatalog = data;
          $scope.NavCatalog = data;
      };
  
      $scope.catalogItemClick = function (catalogItem) {
          getVODCatalogData(catalogItem.VOD_CATALOG_GK, ++$scope.VODCatalogLevel);
      };
  
      getVODCatalogData(null, $scope.VODCatalogLevel);
  }
  
  VODCatalogModule.controller("VODCatalogController", VODCatalogController);
  </code></pre>
  
  <p>My view (VODCatalog_TopLevelView.html):</p>
  
  <pre><code>&lt;section class="zebra brightBGcolor"&gt;
      &lt;div class="catalog"&gt;
          &lt;div class="centerPage"&gt;
              &lt;div class="pageTitle withBreadCrumbs"&gt;
                  &lt;h3&gt;VOD&lt;/h3&gt;
                  &lt;ul class="breadCrumbs {{ crumbsVisible }}"&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;VOD&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li ng-repeat-start="crumb in BreadCrumbs"&gt;
                          &lt;span&gt;&amp;nbsp;&lt;/span&gt;
                      &lt;/li&gt;
                      &lt;li ng-repeat-end&gt;
                          &lt;a href="#"&gt;{{ crumb.NAME }}&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;ul class="list inRow4 clearfix"&gt;
                  &lt;li ng-repeat="catalogItem in MainCatalog" ng-click="catalogItemClick(catalogItem)"&gt;
                      &lt;a class="box" href="#"&gt;
                          &lt;img src="{{ catalogItem.MEDIA_URI_Complete}}" alt=""&gt;
                          &lt;div class="textContainer"&gt;
                              &lt;h4&gt;{{ catalogItem.NAME }}&lt;/h4&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>At the start all looks great, it loads the 1st ajax call with all the pics and data.</p>
  
  <p>Then when I click at one of the li's with the ng-click the 2nd ajax gets executed twice, once it gets the right data and immediately after it calls itself again with the initial call of getVODCatalogData(null, $scope.VODCatalogLevel); and brings back the old view.</p>
  
  <p>When I tried to put something in module.run it also runs twice, can it help?</p>
  
  <p>I would appreciate any hint and help as it is my 1st time with angular.</p>
  
  <p>thx! 
  ariel</p>
  
  <p>EDIT:
  some more info - I put a log at the beginning of the controller and after the click the controller gets initialized again</p>