title: Dynamically populate tabs with the right content in angularJS
body: <p>I'm trying to learn angularJS, and I wanted to do a simple app which populate tabs dynamically using Json data.</p>
  
  <p>I have two tables in my db, City and Country. so a Country have many Cities and a City have only one Country.</p>
  
  <p>Lets say :</p>
  
  <p>Country :</p>
  
  <ul>
  <li>countryId : 1, countryName : France</li>
  <li>countryId : 2, countryName : England</li>
  </ul>
  
  <p>City :</p>
  
  <ul>
  <li>cityId : 1, countryId : 1, cityName : Paris</li>
  <li>cityId : 2, countryId : 1, cityName : Marseille</li>
  <li>cityId : 3, countryId : 2, cityName : London</li>
  <li>cityId : 4, countryId : 2, cityName : Southampton</li>
  </ul>
  
  <p>I created a simple api that have only two methods actually :</p>
  
  <p>GET /api/City give me that JSON (all the cities) :</p>
  
  <pre><code>    {
      "City":[
      {
       "cityId" : 1,
       "countryId" : 1, 
       "cityName" : Paris
      },
      ...
      ...
      ]
      }
  </code></pre>
  
  <p>And GET /api/Country give me that JSON (all the countries) :</p>
  
  <pre><code>    {
      "Country":[
      {
       "countryId" : 1,
       "countryName" : France
      },
      ...
      ...
      ]
      }
  </code></pre>
  
  <p>I want to have something like this in my view :</p>
  
  <p>Tab France -> Content : Paris Marseille</p>
  
  <p>Tab England -> Content : London Southampton</p>
  
  <p>So the two tabs must have the name of the two countries , and they must have their cities as a content.</p>
  
  <p>Everything must be dynamic because later I want to implement two interfaces in order to give the possibility of adding Countries ( tabs ) and Cities by choosing a Country with a &lt; select >.</p>
  
  <p>In my controller, I do two $http requests, one on /api/City and i fill $scope.TabsContent with the data and the other on /api/Country in $scope.Tabs.</p>
  
  <p>I already achieved to dynamically create the two Country tabs ( with ng-repeat on $scope.Tabs) and they show the right container when i click on them.</p>
  
  <p>My problem here is to fill those two containers with the right cities that are in $scope.TabsContent. ( Paris and Marseille in France tab / London and Southampton in England tab ).</p>
  
  <p>I tried in many ways, but no success. I think I do not used the right approach..</p>
  
  <p><strong>EDIT :</strong></p>
  
  <p>Here's the code (simplified) :</p>
  
  <p>HTML :</p>
  
  <pre><code>    &lt;body ng-app="countriesAndCities" ng-controller="MainCtrl"&gt;
  
  
        &lt;ul class="nav nav-tabs" id="mytab"&gt;
            &lt;li ng-repeat="Tab in Tabs"  ng-class="{active: $index == 0}"&gt;
                &lt;a href="#tab{{$index + 1}}" data-toggle="tab"&gt;{{Tab.name}}&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;div class="tab-content"&gt;
            &lt;div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="Tab in Tabs" ng-class="{active: $index == 0}"&gt;
  
                      Tab n° {{$index + 1}}
  
            &lt;/div&gt;
        &lt;/div&gt;
  
    &lt;/body&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>var app = angular.module('countriesAndCities', []);
  
  app.controller('MainCtrl', function ($scope, $http) {
  
  $('#mytab').tab('show');
  
  // This is what I got from $http request, simplification in hardcode here :
  
      var Tabs = [{"countryId":"1","countryName":"France"},{"countryId":"2","countryName":"England"}];
  
  // Same for the cities :
  
   var TabsContent = [{"cityId":"1","countryId":1,"cityName":"Paris"},{"cityId":"2","countryId":1,"cityName":"Marseille"},{"cityId":"3","countryId":2,"cityName":"London"},{"cityId":"4","countryId":2,"cityName":"Southampton"}];
  
  
  
  });
  </code></pre>
  
  <p>So actually, I have two tabs France &amp; England, and their contents are "Tab n° 1" for France tab and "Tab n°2" for England tab.</p>
  
  <p>How do i replace "Tab n°1" by "Paris Marseille" and "Tab n°2" by "London Southampton" by using $scope.TabsContent ?</p>