title: Loading partial view into the main view AngularJS
body: <p>I have a partial view, which I plan to include in different pages.</p>
  
  <p>I tried out the following to load the partial view but the view doesn't display the values stored in the model.</p>
  
  <p><strong>Angular controller:</strong></p>
  
  <pre><code>//This gets the required data as JSON
  AdminService.getSettings(function (callback) {
      $scope.attributes = callback;
      $scope.groups = _.groupBy($scope.attributes, "Group");
      $scope.previous = angular.copy($scope.attributes);
      //This gets the partial view and adds to the main view
      CommonService.SettingsListView_get(function (callback) {  
          angular.element('#settingsList').html(callback);
      });
  });
  </code></pre>
  
  <p><strong>MVC Controller:</strong></p>
  
  <pre><code>public ActionResult SettingsList()
  {
      return PartialView();
  }
  </code></pre>
  
  <p><strong>View: Main</strong></p>
  
  <pre><code>&lt;body ng-app="AngularAdmin" ng-cloak&gt;
  &lt;div ng-controller="SettingsCtrl" id="top" ng-init="init()"&gt;
      &lt;br /&gt;
      &lt;div id="settingsList" &gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>View:partial</strong></p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
      &lt;div style="padding:5px 0"&gt;&lt;button ng-click="updateAttributes(attributes)" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-floppy-disk"&gt;&lt;/span&gt; Update Settings&lt;/button&gt;&lt;/div&gt;
      &lt;div class="panel panel-primary" data-ng-repeat="(items, item) in groups" ng-style="$index &lt; 11 ? panelStyle[$index] : commonPanelStyle"&gt;
          &lt;div class="panel-heading" ng-style="$index &lt; 11 ? panelHeaderStyle[$index] : commonPanelHeaderStyle"&gt;
              &lt;a data-toggle="collapse" href="#accordion{{$index}}" ng-style="anchorStyle"&gt;
                  &lt;h4 class="panel-title"&gt;
                      {{ items }}
                  &lt;/h4&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  
      &lt;div id="accordion{{$index}}" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body" ng-style="$index &lt; 11 ? panelBodyStyle[$index] : commonPanelBodyStyle"&gt;
              &lt;table class="table"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Attribute&lt;/th&gt;
                      &lt;th&gt;Description&lt;/th&gt;
                      &lt;th&gt;Value&lt;/th&gt;
                      &lt;th&gt;Taken from&lt;/th&gt;
                      &lt;th&gt;Editable&lt;/th&gt;
                      &lt;th&gt;Delete&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr data-ng-repeat="i in item"&gt;
                      &lt;td&gt; {{ i.AttributeName }} &lt;/td&gt;
                      &lt;td&gt; {{ i.Description }} &lt;/td&gt;
                      &lt;td&gt; &lt;input type="text" ng-model="i.Value" class="form-control" ng-disabled="{{!i.Editable}}" /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;&lt;span ng-bind="i.TakenFrom | settingsfilter"&gt;{{ Heritage }}&lt;/span&gt; &lt;/td&gt;
                      &lt;td&gt;&lt;span ng-class="i.Editable | activefilter : { icon1 : 'glyphicon-edit', icon2 : 'glyphicon-remove'}" class="glyphicon" style="font-weight: bolder"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;span ng-click="deleteAttribute(i.AttributeGuid)" ng-class="i.TakenFrom | deletefilter : 1" class="glyphicon" style="font-weight: bolder"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;button style="float:right" class="btn btn-default" ng-click="updateAttributes(item)"&gt;&lt;span class="glyphicon glyphicon-floppy-disk"&gt;&lt;/span&gt; Update &lt;em&gt;{{ items }}&lt;/em&gt; Settings &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Issue:</strong>
  I can't display the settings data I can see <code>{{ items }}</code> and nothing else in the view.</p>