title: Programatically add tab linked to ui.router
body: <p>I have the following configuration for my $stateProvider:</p>
  
  <pre><code>$stateProvider
      .state("main", { abstract: true, url: "/main", templateUrl: "main.html" })
      .state("main.tab1", { url: "/tab1", templateUrl: "tab1.html" })
      .state("main.tab2", { url: "/tab2", templateUrl: "tab2.html" })
      .state("main.tab3", {
          url: "/tab3/{id}",
          templateUrl: "tab3.html",
          controller: function($scope, $stateParams) {
              console.log("ID is " + $stateParams.id)
              $scope.id = $stateParams.id;
          }
       });
  </code></pre>
  
  <p>I'm organising the main content into tabs under this controller:</p>
  
  <pre><code>&lt;div ng-controller="mainController"&gt;
      &lt;tabset&gt;
          &lt;tab ng-repeat="t in tabs"
               heading="{{t.heading}}"
               select="go(t.route)"
               active="t.active"&gt;
          &lt;/tab&gt;
      &lt;/tabset&gt;
  
      &lt;h2&gt;View:&lt;/h2&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, through a button with an ng-click in main.html I'm calling this function:</p>
  
  <pre><code>$scope.tabs.push({heading: "Tab 3", route: "main.tab3", active: true})
  </code></pre>
  
  <p>My intention is to be able to push a new entry onto the tabs object which will then load content into a newly created tab through the $stateProvider configuration.</p>
  
  <p>The question is, how can I pass a parameter through the route, as if I were invoking /tab3/1234 directly?</p>