One of the great things about AngularJS is the way you can easily reuse and embed templates and controllers. Recently I was asked to create two versions of a control panel – one where there were several individual pages, and another where we had the pages as tabs. As I was already using the excellent AngularJS Bootstrap plugin I thought about doing something like:

<tabset>
  <tab ...>
    <div ng-include=... />
  </tab ...>
  ...
<tabset>

However the issue with this is that you load all the templates (and controllers) at page-load so if I update data in one tab it will still show the old data (from page-load time) when I change to another tab.

After scratching my head for a while I came up with the following simple method:

<div ng-controller="Tabs">

  <ul class="nav nav-tabs noprint">
    <li role="presentation"><a href="#/">
      <span class="glyphicon glyphicon-circle-arrow-left"></span>
        Dön
    </a></li>
    <li role="presentation" ng-class="{ active: type == 'recipe' }"><a href="#/edit/recipe/{{ rec_id }}">
      <span class="glyphicon glyphicon-edit"></span>
      Tarife
    </a></li>
    ...
  </ul>

  <div ng-include="'templates/' + template + '.html'"></div>

</div>

Then create a simple controller:

t.controller('Tabs', function($scope, $routeParams) {
  $scope.rec_id = $routeParams.rec_id;
  $scope.template = $routeParams.template;
});

And set up the routing (individual pages have their own routes&params already set up):

// For new combined tabs
path: '/edit/:template/:rec_id?'

Job done!