Ng-repeat does not update html

Question

I am new to Angular and you need your help on a problem from ng-repeatmy application.

Question: I have an html page ( event.html) and in the corresponding file controller, I make a request to the firebase collection and update the array ( $scope.events). The problem is that the data from firebase takes several seconds to load, and by the time the data reaches $scope.events, it is ng-repeatalready running and displays a blank screen. Elements are displayed correctly the moment I click the button on the HTML ( event.html) page .

Sequence of events: I have a login page ( login.html) where I enter the username and phone number, and I click the registration button. I set this click on the registration button to switch to a new state ( event.html).

Here is the controller code for login.html:

$scope.register = function (user) {
    $scope.user = user.name;
    $scope.phonenumber = user.phonenumber;

    var myuser = users.child($scope.user);

    myuser.set({
        phone : $scope.phonenumber,
        Eventid : " ",
        name : $scope.user
    })
    var userid = myuser.key();
    console.log('id is ' +userid);
    $state.go('event');
}

The controller event.html(state:) eventhas the following code:

var ref = new Firebase("https://glowing-torch-9862.firebaseio.com/Users/Anson/Eventid/");
var eventref = new Firebase("https://glowing-torch-9862.firebaseio.com/Events");
var myevent = " ";
$scope.events = [];

$scope.displayEvent = function (Eventid) {
    UserData.eventDescription(Eventid)
    //UserData.getDesc()
    $state.go('myevents');
    //console.log(Eventid);
};
function listEvent(myevents) {
    $scope.events.push(myevents);
    console.log("pushed to array");
    console.log($scope.events);
};
function updateEvents(myevents) {
    EventService.getEvent(myevents);
    //console.log("success");
};

ref.once('value', function (snapshot) {
    snapshot.forEach(function (childSnapshot) {
        $scope.id = childSnapshot.val();
        angular.forEach($scope.id, function(key) {
            eventref.orderByChild("Eventid").equalTo(key).on("child_added", function(snapshot) {
                myevents = snapshot.val();
                console.log(myevents) // testing 26 Feb
                listEvent(myevents);
                updateEvents(myevents);
            });
        });
    });
});

$scope.createEvent = function () {
    $state.go('list');
}

event.html contains the following code:

<ion-view view-title="Events">
    <ion-nav-buttons side="primary">
        <button class="button" ng-click="createEvent()">Create Event</button>
        <button class="button" ng-click="showEvent()">Show Event</button>
    </ion-nav-buttons>
    <ion-content class="has-header padding">
        <div class="list">
            <ion-item align="center" >
                <button class= "button button-block button-light" ng-repeat="event in events" ng-click="displayEvent(event.Eventid)"/>
                {{event.Description}} 
            </ion-item>
        </div>
    </ion-content>
</ion-view>

showEvent - , HTML ng-repeat. , 2 firebase, " " , ng-repeat , . , ng-repeat $scope.events, firebase , , , , HTML. ng-repeat , , "" ( " " ), . , - . stackoverflow , , , .

Answer 1

$scope.$apply(); , $scope.$apply

$scope.$apply(function(){
  $scope.events.push(<enter_your_new_events_name>);
})

Answer 2

, , , JS. .

$scope.$digest(); $scope.$apply();

, .

Answer 3

In your case, you need to delay the binding time. Use the $ timeout or ng-options function with the debounce property in your view.

you need to set the approximate time to get the data from the rest of the API call. Using any of the methods below, you will solve the problem.

Method 1:

var myapp = angular.module("myapp", []);
myapp.controller("DIController", function($scope, $timeout){
    $scope.callAtTimeout = function() {
        console.log("$scope.callAtTimeout - Timeout occurred");
    }
    $timeout( function(){ $scope.callAtTimeout(); }, 3000);
});

Method 2:

// in your view
<input type="text" name="userName"
       ng-model="user.name"
       ng-model-options="{ debounce: 1000 }" />