title: angularjs ng-controller inside ng-controller
body: <p>I have a ng-controller in _Layout page like this.</p>
  
  <pre><code>  &lt;div ng-controller="LayoutController"&gt;
  left content....
      @RenderBody
  right content..
  </code></pre>
  
  <p></p>
  
  <p>And using angular module in layout with ajax ( that part works ) </p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
      var module_ = angular.module("myapp", []);
      var controller_ = module_.controller("layoutController", function ($scope) {
          $.ajax({
              type: "POST",
              url: "Home/GetMenu",
              success: function (result) {
                  $.each(result, function (i, ix) {
                      result[i].ID = i + 1;
                  });
                  $scope.TopCharactersModel = result;
                  $scope.$apply();
              },
              complete: function () {
  
              }
          })
  </code></pre>
  
  <p>Then i want to use another Ng-Controller inside Index.html which derived from this layout page.
  Javascript code is not work at this side and  chrome debugger show this error 
  <strong>WARNING: Tried to load angular more than once.</strong></p>
  
  <pre><code>    &lt;div ng-controller="IndexController"&gt;
       &lt;div class="panel-group" id="accordion" ng-repeat="arr_ in newsArr"&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  
  
   &lt;script&gt;
          var module = angular.module("myapp", []);
          var myController1 = module_.controller("IndexController", function ($scope) {
  
              $.ajax({
                  url: "Home/GetNews",
                  type: "POST",
                  success: function (result) {
                      $scope.newsArr = result;
                      //  $scope.$digest();
                      $scope.$apply()
                  },
                  complete: function () {
                  }
              });
          });
  
      &lt;/script&gt;
  </code></pre>