using ng-repeat with the bootstrap navbar element

Question

I am trying to make a nav bar using bootstrap.Following is the code.

<div>
   <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation" class="active"><a href="#">Option 1</a></li>
      <li role="presentation" class="active"><a href="#">Option 2</a></li>
   </ul>
</div>

I want to use the ng-repeat for the options. I tried the following code:

<div ng-controller="MainController" ng-repeat="option in navBarOptions">
   <ul class="nav nav-tabs">
      <li class="active" role="presentation"><a href="#">{{ option.optionText }} </a></li>
   </ul>
</div>

Here's the JS part.

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

app.controller('MainController',['$scope', function($cope) {
$cope.navBarOptions = [
   {
      optionText: 'Home',
   },
   {
      optionText: 'Option 1',
   },
   {
      optionText: 'Option 2',
   },
];
}]);

Thanks. I am fairly new to this domain.Let me know if i missed something very trivial.

Answer 1

You need to repeat the li elements , not the div where the ng-controller resides:

<div ng-controller="MainController">
    <ul class="nav nav-tabs">
        <li role="presentation" ng-repeat="option in navBarOptions">
            <a href="#">{{option.optionText}}</a>
        </li>
    </ul>
</div>

NB: Looking at the generated DOM would have gave you a clue about what is wrong with your code.