title: using ng-repeat with the bootstrap navbar element
body: <p>I am trying to make a nav bar using bootstrap.Following is the code.</p>
  
  <pre><code>&lt;div&gt;
     &lt;ul class="nav nav-tabs"&gt;
        &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
        &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to use the ng-repeat for the options. I tried the following code:</p>
  
  <pre><code>&lt;div ng-controller="MainController" ng-repeat="option in navBarOptions"&gt;
     &lt;ul class="nav nav-tabs"&gt;
        &lt;li class="active" role="presentation"&gt;&lt;a href="#"&gt;{{ option.optionText }} &lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the JS part.</p>
  
  <pre><code>var app = angular.module("myApp",[]);
  
  app.controller('MainController',['$scope', function($cope) {
  $cope.navBarOptions = [
     {
        optionText: 'Home',
     },
     {
        optionText: 'Option 1',
     },
     {
        optionText: 'Option 2',
     },
  ];
  }]);
  </code></pre>
  
  <p>Thanks. I am fairly new to this domain.Let me know if i missed something very trivial.</p>