ng-repeat not updating DOM when element is inserted dynamically

Question

I am using jsonForm to generate a form from 3 different json schemas. When on form is submitted, another form is requested and so on... Data on all 3 form creates ONE json object which is sent back and stored after the last form is filled in.

Forms work as expected, the issue is when updating the list using ng-repeat

HTML:

<ul>
    <li ng-repeat="names in newName">{{names}}</li>
<ul>

Default names array:

$scope.newName= ["test1","test2"];

initial object

var set1 = {
     "setName": "",
     "setAttributes": [],
    "setQuestions": []

};

Angular:

        $scope.createNewSet = function () {
            $http.get('/json/schema1.json').success(function(data) {
                $('#form1').jsonForm({ // DISPLAY FIRST FORM
                 schema: data,
                 "form": [
                   "*",
                   {
                     "type": "submit",
                     "title": "Proceed to step 2"
                   }
                 ],
                 onSubmit: function (errors, values) { 
                    var sName = values.setName;
                    set1.setName = sName;
                    $http.get('/json/schema2.json').success(function(data) {
                        $('#form2').jsonForm({ //DISPLAY SECOND FORM
                        schema: data,
                        "form": [
                          "*",
                          {
                            "type": "submit",
                            "title": "Proceed to step 3"
                          }
                        ], 
                        onSubmit: function (errors, values) { // DISPLAY THIRD FORM
                            set1.setAttributes = values.attributes;
                            $http.get('/json/schema3.json').success(function(data) {
                            $('#form3').jsonForm({
                               schema: data,
                               "form": [
                                  "*",
                                 {
                                  "type": "submit",
                                  "title": "Proceed to step 4"
                                  }
                                ],
                                onSubmit: function (errors, values) { // SAVE COMPLETE SET
                                  set1.setQuestions = values.questions;
                                  $scope.newName.push(set1.setName);  //UPDATE li
                                  $scope.newName.push('blah')
                                    console.log($scope.newName);
                                },
                              });
                            });
                          },   

Browser console shows updated newName array ["test1","test2","Simo","blah"] with Simo and Blah but HTML doesnt show them. Could there be something preventing angular from updating the DOM?

Thanks..

Answer 1

Try reapplying the scope:

$scope.$apply(function(){
    $scope.newName.push(set1.setName);  //UPDATE li
    $scope.newName.push('blah')
});