div in ng-repeat is not getting updated?

Question

I am getting a response from http get request and Iam using the response to iterate in the data

<div id="container" ng-app="myApp" ng-controller="myctrl">
     <div ng-repeat="profile in profiles">
          <p>{{profile.username}}</p>
     </div>
</div>

---

This is for adding one profile on click

<input ng-click="addProfile()" type="button" value="add Profile" />

---

Here is my get request in the controller

var app = angular.module('myApp', []);
app.controller('myctrl', function($scope, $http) {
 $scope.profiles = [];
 $http.get("test1.json")
 .then(function(response) {
     $scope.profiles = response.data.profiles; //Response is provided below
 });
$scope.addProfile = function(){
      $http.get('test2.json')
     .then(function(response) {
       alert("af");
         $scope.items = response.data.profiles; //Response is provided below
         $scope.profiles.push($scope.items);
         console.log($scope.profiles); //gives the update Array

            });
        });
});

---

response of my get request of test1.json

{
   "Id": "44442232",
    "profiles": [
        {
           "type": "Friend",
           "username": "Username 1",
         },
         {
            "type": "Student ",
            "username": "Username 2",
           }
       ]
   } 

---

response of my get request of test2.json

{
   "Id": "44442232",
    "profiles": [
        {
           "type": "Friend",
           "username": "Username 4",
         },
         {
            "type": "Student ",
            "username": "Username 5"
           }
       ]
   } 

I have tried console.log after updating in the array.The array is updated but the div in ng-repeat is not getting updated?

Answer 1

Please close your JSON calling request by putting ')' at the end. There is no error apart from this and the same code works for me fine. // Code goes here

var myApp = angular.module("myApp", []);
myApp.controller("myctrl", function($scope, $http) {

$http.get('test1.json')
 .then(function(response) {
   $scope.profiles = response.data.profiles; //Response is provided below
 });

   $scope.addProfile = function(){
     $http.get('test2.json')
     .then(function(response) {
         $scope.items = response.data.profiles; //Response is provided below
         angular.forEach($scope.items, function(value) {
           $scope.profiles.push(value);
         });
         console.log($scope.profiles);

     });

 };

});

Please find this updated js code and check. Once it is fixed let me know. happy coding :)

Answer 2

First of all I don't think you need $scope.$apply() to trigger the digest cycle. You are in angular context.

Second, you are missing a ')' when you are calling .then() . You currently have '.then(function(){};'

Third, your response object should not have a comma after the username property if that property is the last one in the object.

Also do you have a silent fail, or it is an error in the console, and the processed html for the ng-repeat is blank or you get the angular interpolation syntax {{profile.username}}?