view not updating in AngularJS after $http.get

Question

After getting values from REST-API $scope is not updating view

here is my HTML

<div ng-repeat="s in services1">
<label class="checkbox-inline">
<input type="checkbox" id="{{s.Id}}" name="{{s.Id}}" ng-model="s.IsChecked">
{{s.Name}}</label>
<br/>
</div>

AngularJS Controller

var addMember = [
    '$scope', '$http', function ($scope, $http) {
        $scope.member = [];
        $scope.services1 = [];
        var bid = "";

        //onclick function
        $scope.setId = function(id) {
            $("#processing-modal").modal('show');
            $http.get('/api/Servicesapi/ServicesByBusiness/' + id)
                .then(function (response) { 
                    $scope.services1 = response.data;
                        $("#processing-modal").modal('hide');
                        $("#anm").modal('show');
                        console.log($scope.services1); //this is printing values

                },
                    function() {
                        alert("Error in getting services of this Employee");
                    });
            console.log($scope.services1); //this prints empty array
        };
    }
];

first console.log() prints array with values but the other one outside $http.get function prints empty braces and view is not updating

UPDATE

FULL HTML VIEW

       <div ng-controller="addMember">
    <div class="savebar"><button type="submit" class="btn btn-warning" value="Save" 
id="anmbutton" ng-click="setId('@ViewBag.bid');">Add New Members</button>
</div>
        </div>

 <!--Add new Members Modal -->
<div ng-controller="addMember">
<div class="modal fade" id="anm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 790px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Team Member</h4>
            </div>
            <div class="modal-body">
                <div style="float: left">
                    <div style="float: left">
                        <div class="container" style="border-right: 1px solid gray; margin-left: -20px; margin-top: -12px; width: 440px;">
                            <!-- Profile Picture -->@*<br/>*@
                            <div style="border: 1px solid; float: left; height: 100px; width: 100px;">
                                <img src="" />
                                <a class="badge" href="#">Add Picture</a>
                            </div>
                            <div style="float: left; height: 100px; margin-left: 20px; width: 200px;">
                                <br/><br/><br/><br/><br/>

                                <input class = "form-control" style = "margin-top: -100px; width: 250px" type="text" value="" id="membername" ng-model="member.Name"/>
                                <input type="checkbox" class="checkbox" id="provideservice" name="provideservice" value="true"/>&nbsp;Provide Services<br/>
                                <input type="checkbox" class="checkbox" id="SearchedByName" name="SearchedByName" value="true" ng-model="member.SearchedByName"/>&nbsp;Allow Selected by Name
                                <hr/>
                            </div>

                        </div>
                        <div style="border-right: 1px solid grey; margin-top: -11px; width: 420px;">
                            <div style="margin-left: 112px; margin-top: 10px; width: 200px;">
                                <label>Pricing Level</label>
                                <input class="form-control" type="text" id="pricinglevel" name="pricinglevel"/>

                                <label>Job Title</label>
                                <input class="form-control" type="text" id="JobTitle" name="JobTitle" value="" ng-model="member.JobTitle"/>

                                <label>Phone</label>
                                <input class="form-control" type="text" id="Phone" name="Phone" value="" ng-model="member.Phone"/>

                                <label>Gender</label>
                                <br/>
                                <label class="checkbox-inline">
                                    <input type="radio" id="Gender" name="Gender" value="Male" ng-model="member.Gender"> Male
                                </label>
                                <label class="checkbox-inline">
                                    <input type="radio" id="Gender" name="Gender" value="Female" ng-model="member.Gender"> Female
                                </label>

                                <label>Email</label>
                                <input class="form-control" type="text" id="Email" name="Email" value="" ng-model="member.Email"/>

                                <label class="checkbox-inline">
                                    <input type="checkbox" id="CanLogin" name="CanLogin" ng-model="member.CanLogin"> Login to Dashboard
                                </label>
                                <br/>
                                <label>about</label>
                                <textarea class="form-control" name="About" ng-model="member.About" ></textarea>
                            </div>
                        </div>
                    </div>

                    <div style="float: right; /*padding-right: 20px;*/margin-right: -345px; margin-top: -16px; width: 340px;">
                        <label>What services can be booked for this employee online?</label>
                        <br/>
                        <div ng-repeat="s in services1">
                            <label class="checkbox-inline">
                                <input type="checkbox" id="{{s.Id}}" name="{{s.Id}}" ng-model="s.IsChecked"> {{s.Name}}
                            </label>
                            <br/>
                        </div>
                        <pre>$scope.services1 {{services1 | json}}</pre>
                    </div>
                </div>
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" ng-click="addNew()" data-dismiss="modal">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>

You have two ng-controller="addMember" declarations :) — Didar_Uranov
– Didar_Uranov, Commented May 2, 2014 at 11:27
the button is on the top of page and code was at bottom and between them is another controller so i declare it two times — Mohsin
– Mohsin, Commented May 2, 2014 at 11:40

Didar_Uranov · Accepted Answer · 2014-05-02 12:00:38Z

5

UPDATE: I reproduced two controllers declarations with same name.

<div ng-controller="addMember">
    <button ng-click="setId()">SDFS</button>

</div>

<div ng-controller="addMember">
    <p ng-repeat="s in services">{{s}}</p>
</div>

ng-repeat doesn't work in second controller declaration. If I move <p ng-repeat="s in services">{{s}}</p> to top controller, it works. Do not declare two controllers with one name :)

END

console.log($scope.services1); //this prints empty array

This is because $http.get() promise is not resolved yet.

Try this code

var addMember = [
    '$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
        $scope.member = [];
        $scope.services1 = [];
        var bid = "";

        //onclick function
        $scope.setId = function(id) {
            $("#processing-modal").modal('show');
            $http.get('/api/Servicesapi/ServicesByBusiness/' + id)
                .then(function (response) { 
                    $timeout(function(){
                        $scope.services1 = response.data;
                    });
                        $("#processing-modal").modal('hide');
                        $("#anm").modal('show');
                        console.log($scope.services1); //this is printing values

                },
                    function() {
                        alert("Error in getting services of this Employee");
                    });
            console.log($scope.services1); //this prints empty array
        };
    }
];

Or call $scope.$apply() after $scope.services1 = response.data;

$scope.services1 = response.data;
$scope.$apply()

edited May 2, 2014 at 12:00

answered May 2, 2014 at 10:24

Didar_Uranov

1,24013 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohsin Over a year ago

$scope.services1 = response.data; $scope.$apply() gives error [$rootScope:inprog] $digest already in progress

Didar_Uranov Over a year ago

I cant see any problems in your code. Give a full code of the view

Collectives™ on Stack Overflow

view not updating in AngularJS after $http.get

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related