Tabs in angular

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<div class="container" ng-app="MyTabs">
    <div class="page-header">
        <ul class="nav navbar-right nav-pills">
            <li ng-class="{'active': tab == 1}"><a href="#/tab/1">Pictures</a>
            </li>
            <li ng-class="{'active': tab == 2}"><a href="#/tab/2">Posts</a>
            </li>
            <li ng-class="{'active': tab == 3}"><a href="#/tab/3">Videos</a>
            </li>
            <li ng-class="{'active': tab == 4}"><a href="#/tab/4">Other</a>
            </li>
        </ul>
    </div>
    <div ui-view></div>
</div>

JavaScript

angular.module('MyTabs', ['ui.router'])
    .config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/tab/1');

    $stateProvider.state('app', {
        url: "/tab",
        abstract: true,
        template: "<div ui-view></div>",
        controller: function($scope){
            $scope.form = {};
        }
    })
        .state('app.tab', {
        url: '/:tab',
            template: function($stateParams){
                return '<h2>This is tab ' + $stateParams.tab + '</h2><input type="text" ng-model="form.name' + $stateParams.tab + '" />';
            },
        /*
        templateUrl: function ($stateParams) {
            return 'partials/' + $stateParams.tab + '.html';
        },
        */
        controller: function ($scope, $state, $stateParams, $rootScope, $log) {
            
            $rootScope.tab = parseInt($stateParams.tab);
        }
    });
})
.run(function () {});