Listing from array in AngularJS

How to list data from array in AngularJS?

Like in the previous post, in this case also we shall use ng-repeat directive to list the data from array. However, here will see how to list the data from array that is declared in JavaScript.

In below code snippet, we have declared the usernames array in JavaScript.

<h4>Looping array</h4>
<script>
    var usernames = ['Sheo', 'Narayan', 'Dutta'];

    var app = angular.module("app", []);
    app.controller("ArrayController", ["$scope", function ($scope) {
        $scope.Usernames = usernames;
    }]);

</script>

<div ng-app="app" ng-controller="ArrayController">
    <ul>
        <li ng-repeat="username in Usernames">{{username}}</li>
    </ul>
</div>

We have created a module named "app" and then controller. In the controller, we have set the Usernames property of the $scope to the usernames array declared.

In the HTML code, the ng-app, ng-controller both have been declared in the same <div> element. The ng-repeat directive is ame as previous post.

Output