I am using angular js to display data. I have an example with static data to bind that. But i want to bind data dynamically so i got the data from javascript function but am not understanding how to use that data in ng-init of div.

Below is the code

<div ng-init="friends = [
                      {name:'John', age:25, gender:'boy'},
                      {name:'Jessie', age:30, gender:'girl'},
                      {name:'Johanna', age:28, gender:'girl'},
                      {name:'Joy', age:15, gender:'girl'},
                      {name:'Mary', age:28, gender:'girl'},
                      {name:'Peter', age:95, gender:'boy'},
                      {name:'Sebastian', age:50, gender:'boy'},
                      {name:'Erika', age:27, gender:'girl'},
                      {name:'Patrick', age:40, gender:'boy'},
                      {name:'Samantha', age:60, gender:'girl'}
            I have {{friends.length}} friends. They are:
            <input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />
            <ul class="example-animate-container">
                <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
                <li class="animate-repeat" ng-if="results.length == 0">
                    <strong>No results found...</strong>

And javascript function is

  function test() {
        var v = getProperties();

i am getting json data in that variable.

2 Answers 2


You have a controller function somewhere correct? Although you can use ng-init to create some data on Angular's $scope object, it is easier to reason about inside a controller function, and you can take advantage of Angular's two way data-binding when new data comes in through your getProperties function.

<!-- html -->
<div ng-controller='yourController'>
  <div ng-repeat="friend in friends">

// js
  .controller('yourController', function ($scope) {
    $scope.friends = [
      {name:'John', age:25, gender:'boy'}

    function getProperties () {
      getData('/path-to-json').success(function (response) {
        $scope.friends = response.data;

The ng-init expression is evaluated every time the page is rendered. So it's for page-refresh data, not for static data.

so your example: ng-init="friends = ..." is a bit ambiguous. If this is static data, the same everytime you come to the page, then no- initialize that in the controller.

I'm no expert, but it seems to me that proper use of ng-init is more like:

ng-init="friends = fetchCurrentFriendsFromServer()"

So in the controller for this page, you'd define

$scope.fetchCurrentFriendsFromServer = function() { ...

And whenever you refresh the page, this will refresh the friends list.

The documentation for this directive says ng-init is:

for injecting data via server side scripting

I don't know what they mean by "server side scripting". I'm doing an http call in the ng-init...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.