How can I convert AJAX into angular js and repeat the code block for each element of an array?

Question

I want create a system where a section of code from an external text file is imported and repeated using angular js. The code needs to run through a number of text files and create a new section for each I have been attempting to rewrite my ajax code from a previous problem in angular js and I cannot seem to find a way to make it work. That problem can be found here: Calling angularjs inside.

My old AJAX code:

$.ajax({
    url : '../src/text/section1.txt',
    dataType: 'text',
    success : function (data) {
        $('#section1').append(data);
    },
});

This is what I have currently:

app.controller('sectionController', ['$scope', function($scope, $http) {
  $scope.sections = [
    {id: 1, title: 'Page 1', data: ''},
    {id: 2, title: 'Page 2', data: ''},
    {id: 3, title: 'Page 3', data: ''},
    {id: 4, title: 'Page 4', data: ''},
    {id: 5, title: 'Page 5', data: ''},];

  angular.forEach($scope.sections, function(id) {
    $http({
      url : '../../src/text/section' + $scope.sections.id +'.txt',
      dataType: 'text',
    }).success(function (data) {
      $scope.sections[id].data = data;
    });
  });
}]);

My HTML is:

<div class="body">
            <div class="bodyBackground"></div>
            <div class="contentContainer" ng-controller="sectionController">
                <div id="sectionContainer" ng-repeat="section in sections">
                    <div id="section{{ section.id }}">
                        <h3 class="sectionTitle">{{ section.title }}</h3>
                        <div>{{ section.data }}</div>
                    </div>
                </div>  
            </div>
        </div>

Thanks in Advance

Answer 1

consider adding a 'data' property to your $scope.sections objects

$scope.sections = [
{id: 1, title: 'page 1', data: ''}
]

then in the success of your HTTP set the response data to the appropriate section object data property

  }).success(function (data) {
      section.data = data;
    });

and in your HTML Bind to the data property of the section object

    app.controller('sectionController', ['$scope', '$http', function($scope, $http) {
    $scope.sections = [
        {id: 1, title: 'Page 1', data: ''},
        {id: 2, title: 'Page 2', data: ''},
        {id: 3, title: 'Page 3', data: ''},
        {id: 4, title: 'Page 4', data: ''},
        {id: 5, title: 'Page 5', data: ''}];

    angular.forEach($scope.sections, function(section) {
        $http({
            url : '../../src/text/section' + section.id +'.txt',
            dataType: 'text'
        }).success(function (data) {
            section.data = data;
        });
    });
}]);