Angular 1.5.5 render html based on return value of an $http call

I want to know the best way to proceed given the following information:

I have a controller which makes 2 http calls using a factory.

DataFactory.getTestDisplaySections(testID).then(function (response) {
    $scope.testSections = JSON.parse(response.data);
});

DataFactory.getTestObjectByTestID(testID).then(function (response) {
    $scope.testObject = JSON.parse(response.data);
});

The call returns two arrays. I want to generate html with data from the array embedded in it. Right now, my template for the controller contains only an empty shell of a page.

<div class="container">
    <div class="row">
        <div ng-bind-html="sectionHTML"></div>
    </div>
</div>

The sectionHTML above is my variable which contains the html markup for the entire page.

The first call returns data that gives me names of panels that are to be displayed on the page. These could be 4 or more. I want to use the following html to display each panel.

$scope.sectionHTML = '<div class="col-lg-6">'+
     '<div class="panel panel-primary">'+
          '<div class="panel-heading lead">' + panelDiaplayName + '</div>' +
           '<div class="panel-body">'+
               '<div id="test_info" class="col-lg-12">' +

               '</div>'+
           '</div>'+
     '</div>'+
'</div>'

Should I just go through the panel data in a for loop and create the html that way for each panel?

When I try to add the panelDisplayName using {{}} It shows up as just {{panelDisplayName}} will this be an issue, every time I have to evaluate an angular expression? How can I resolve this issue?

Second, I have other information that I need to display within each of the panels. This comes from the second http call. Each panel will have details in it and each piece of information will be editable. Can anybody help with the best way to do it?

I can give more explanation if anyone needs it.

Thanks Paras

Solution

I think you are asking about multiple issues here, so I will try to help solve the first two, looping through your array to build your page and helping you get the {{}} data-binding to work.

For your panels, don't use a for loop and build html in your controller. You are using angular, the angular way is using ng-repeat. You add this to your html template and it will build the dom by iterating over your array. In your example:

.html

<div class="container">
    <div class="row">
        <!-- this is where we are iterating over the array (ng-repeat) -->
        <div class="col-lg-6" ng-repeat="section in testSections">
            <div class="panel panel-primary">
                <!-- section is the current item being iterated in the array, so we are printing the displayName for the section -->
                <div class="panel-heading lead">{{section.panelDiaplayName}}</div>
                <div class="panel-body">
                    <div id="test_info" class="col-lg-12">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

As for the data-binding. My assumption here is that you aren't adding ng-app and/or ng-controller to elements that encompass your data-bindings. For example:

.html

<body ng-app="yourApp" ng-controller="yourController">
    <h1>{{testMessage}}</h1>
</body>

app.js

var app = angular.module('yourApp').controller('yourController', ['$scope', function($scope) {
    $scope.testMessage = "Hello World";
}])

As for your second question about dealing with data that will be edited, I recommend giving that a shot yourself. Look in to angular forms and ng-model. Those should help you get started. After giving that a shot, if you are still struggling, ask a new question for the specific issue you are struggling with.