Angular $scope not getting variables

Question

I have a simple html file that make make search on Algolia and returns result. I can console the result but can not access $scope.users from view. How can I grab that $scope.users in view.

here is my app.js file

    var myApp = angular.module('myApp', []);

    myApp.controller('usersController', function($scope) {
        $scope.users = [];

        var client = algoliasearch('my_app_id', 'my_app_key');
        var index = client.initIndex('getstarted_actors');

        index.search('john', function searchDone(err, content) {
          $scope.users.push(content.hits);
          console.log(content.hits);
        });

    });

Here is my html view file

<div class="results" ng-controller="usersController">
    <div ng-repeat="user in users">
        <h3>{{ user.name }}</h3>
    </div>  
</div>

note: ng-app="myApp" attribute given in html tag.

what does {{user}} print, I believe you don't have the name property on the user. — Wild Widow
– Wild Widow, Commented May 12, 2016 at 16:00
Sintax looks old, try ng-controller="usersController as user" then ng-repeat="usr in user.users" and {{usr.name}} , OBVIOUSLY be sure your $scope.users.push() is really pushing — Filippo oretti
– Filippo oretti, Commented May 12, 2016 at 16:01
I think $scope.users.push() its not really pushing. because when i console $scope.users outside of index.search function() its just consoling empty [] array. What should I do? @sbaaang? — Mohammad Ohidul
– Mohammad Ohidul, Commented May 12, 2016 at 16:08

tymeJV · Accepted Answer · 2016-05-12 16:02:33Z

1

It's most likely because your index.search call isn't triggering an Angular $digest cycle - manually trigger one with either $apply or a $timeout

index.search('john', function searchDone(err, content) {
  $scope.users.push(content.hits);
  $scope.$apply();
});

The $apply() could throw $digest already in progress errors - another way with a $timeout

myApp.controller('usersController', function($scope, $timeout) {
    index.search('john', function searchDone(err, content) {
        $timeout(function() {
            $scope.users.push(content.hits);
        });
    });
});

answered May 12, 2016 at 16:02

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

4 Comments

Filippo oretti Over a year ago

$scope.$evalAsync() i would say :P instead of $timeout

Ant Kennedy Over a year ago

no need for the $timeout as it wraps a call to $apply docs.angularjs.org/api/ng/service/$timeout which can be turned off by setting invokeApply to false (defaults to true)

Mohammad Ohidul Over a year ago

I think $scope.users.push() its not really pushing. because when i console $scope.users outside of index.search function() its just consoling empty [] array. What should I do?

tymeJV Over a year ago

@MohammadOhidul -- Did you try the above solution? The log could be wrong since the above search is async...

Ant Kennedy · Accepted Answer · 2016-05-12 16:02:53Z

0

try calling $scope.$apply() to update your bindings

index.search('john', function searchDone(err, content) {
  $scope.users.push(content.hits);
  console.log(content.hits);
  $scope.$apply();
});

answered May 12, 2016 at 16:02

Ant Kennedy

1,2407 silver badges13 bronze badges

Comments

Kyle · Accepted Answer · 2016-05-12 16:03:10Z

0

algoliasearch doesn't look like it's an injected service and therefore not native to the angular framework. Try calling $scope.$apply().

answered May 12, 2016 at 16:03

Kyle

5,6077 gold badges38 silver badges48 bronze badges

Collectives™ on Stack Overflow

Angular $scope not getting variables

3 Answers 3

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related