Implementing angularJs factory or service for bootstrap tabs -

how write service or factory bootstrap tabs using angularjs. placed in 1 controller need common function(repeated code) different controllers.

<ul class="nav nav-tabs">     <li data-ng-class="{active:tab===0}">         <a href ng-click="changetab(0)"> <i class="fa fa-list"></i></a>     </li>     <li data-ng-class="{active:tab===1}">         <a href ng-click="changetab(1)"><i class="fa fa-user"></i></a>     </li> </ul>  <div data-ng-class="{activetab:tab===0}" ng-show="isactivetab(0)">   tab1 </div> <div data-ng-class="{activetab:tab===1}" ng-show="isactivetab(1)">   tab2 </div> 

controller

$scope.tab = 0;         $scope.changetab = function(newtab){       $scope.tab = newtab;     };         $scope.isactivetab = function(tab){       return $scope.tab === tab;     };  

hi write out using service or factory see example

<ul ng-init="tab = 1">               <li ng-class="{active:tab===1}">        <a href ng-click="tab = 1">tab1</a>                    </li>                <li ng-class="{active:tab===2}">         <a href ng-click="tab = 2">tab2</a>                   </li>                <li ng-class="{active:tab===3}">        <a href ng-click="tab = 3">tab3</a>                </li>                <br><br>      <p ng-show="tab === 1"> tab1 content </p>                <p ng-show="tab === 2"> tab2 content</p>      <p ng-show="tab === 3"> tab3 content</p>         </ul> 

dynamically change through controller see working example here