Angular ng-repeat on array inside an array of objects

Question

I have problem accessing an array inside an array of objects in AngularJS.

HTML:

<li ng-repeat="ai in main.a2">
  <div np-repeat="bi in ai.b">
    <span ng-bind="bi"></span>b2
  </div>
 </li>

javascript:

var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function($scope) {
  self.a2 = [
    {b: ['foo']},
    {b: ['bar', 'baz']},
    {b: ['boo']}
 ];
}]);

Expected output:

foob2
foobazb2
boob2

Real output:

b2
b2
b2

And here is the (non-working) example.

I have checked similar posts, but most of them are just mistakes, and so could be mine. But I have checked with errors so I am thinking that I have fallen into some pitfall.

Answer 1

You have a typo error in <div np-repeat="bi in ai.b">. Change it to:

<div ng-repeat="bi in ai.b">

function MyCtrl($scope) {
    $scope.a2 = [
       {b: ['foo']},
       {b: ['bar', 'baz']},
       {b: ['boo']}
    ];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
   <li ng-repeat="ai in a2">
       <div ng-repeat="bi in ai.b">
         <span ng-bind="bi"></span>b2
       </div>
   </li>
</div>

Answer 2

You had a typo like @Arg0n mentioned. np-repeat, should be ng-repeat.

And in-order to make this in line add style="display:inline" style.

 <li ng-repeat="ai in main.a2">
    <div ng-repeat="bi in ai.b" style="display:inline">
      <span>{{bi}}</span>
    </div>b2
  </li> 

Demo