angular tab slide

http://angularjs.org/

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    
    <slide-tabs tabs="tabs"></slide-tabs>
  </div>
</div>

CSS

.slide-tabs {
  display: flex;
  position: relative;
  //background-color: #bbb;
  //border-radius: 15px;
  //border: 2px solid black;
  width: 250px;
  height: 30px;
}
.slide-tab {
  padding: 5px 10px;
  float: left;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.highlight {
  position: absolute;
  background-color: red;
  border-radius: 15px;
  height: 30px;
  left: 0;
  transition: .25s ease-in-out;
}

JavaScript

var app = angular.module('myApp',[]);

app.controller('MyCtrl', ['$scope', function($scope){
	$scope.tabs = [{name: 'Chapter View', active: false},{name: 'List View', active: true}];
	$scope.getActiveTabName = function(){
  	return _.findWhere($scope.tabs, {active: true});
  };
}])

app.directive('slideTabs', function() {
  var template = '<div class=slide-tabs>' +
   		 '<div class="highlight"></div>' +
        '<div ng-repeat="tab in tabs" class="slide-tab" ng-click="select($index)">{{tab.name}}</div>' +
    '</div>';

  return({
    link: link,
    replace: true,
    restrict: "EA",
    template: template,
    scope: {
      tabs: '='
    }
  });

  function link(scope, element, attributes) {
    var elWidth = element[0].offsetWidth;
    var tabWidth = elWidth / scope.tabs.length;
    var highlight = angular.element(element[0].querySelector('.highlight'));
    highlight.css('width', tabWidth + 'px');
  	
    scope.getActiveTabIdx = function(){
      return _.findIndex(scope.tabs, function(tab){ return tab.active });
    };
    
    scope.select = function(idx){
      scope.tabIndex = idx;
      highlight.css('transform', 'translateX(' + idx * tabWidth + 'px)');
      _.each(scope.tabs, function(t,i){
      	if (i === idx) { t.active = true } else { t.active = false };
      });
    };
    
    scope.$watch('tabs', function (a,b) {
    	var curIdx = scope.getActiveTabIdx();
    	highlight.css('transform', 'translateX(' + curIdx * tabWidth + 'px)');
      var tabs = element[0].querySelectorAll('.slide-tab');
      _.each(tabs, function(tab){
        angular.element(tab).css('width', tabWidth + 'px');
      });
    })
  };
});