Angular drop down menu bar directive

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="appCtrl">
    <menu-bar menu-bar="menuBar1" menu-item-list="menuItemList1"></menu-bar>
    <menu-bar menu-bar="menuBar2" menu-item-list="menuItemList2"></menu-bar>
  </body>

</html>

// Code goes here

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

app.controller('appCtrl', ["$scope", function($scope){
  
  // your menu bar with buttons
  $scope.menuBar1 = [
    {
      name:"Menu 1",
      id:"1",
      selected: false
    },
    {
      name:"Menu 2",
      id:"2",
      selected: false
    },    
    {
      name:"Menu 3",
      id:"3",
      selected: false
    }
  ];
  
  $scope.menuBar2 = [
    {
      name:"Menu 4",
      id:"4",
      selected: false
    },
    {
      name:"Menu 5",
      id:"5",
      selected: false
    },    
    {
      name:"Menu 6",
      id:"6",
      selected: false
    },
    {
      name:"Menu 7",
      id:"7",
      selected: false
    }
  ];
  
  // your menu content lists which you attach to the menu bar directive
  $scope.menuItemList1 = [
    {
      "item":[
        {
          name:"MenuItem",
          ref:"1.0"
        },
        {
          name:"MenuItem",
          ref:"1.1"
        },
        {
          name:"MenuItem",
          ref:"1.2"
        },
        {
          name:"MenuItem",
          ref:"1.3"
        },
        {
          name:"MenuItem",
          ref:"1.4"
        }
      ]
    },
    {
      "item":[
        {
          name:"MenuItem",
          ref:"2.0"
        },
        {
          name:"MenuItem",
          ref:"2.1"
        }
      ]
    },
    {
      "item":[
        {
          name:"MenuItem",
          ref:"3.0"
        },
        {
          name:"MenuItem",
          ref:"3.1"
        }
      ]
    }
  ];
  
  $scope.menuItemList2 = [
    {
      "item":[
        {
          name:"MenuItem",
          ref:"4.0"
        },
        {
          name:"MenuItem",
          ref:"4.1"
        }
      ]
    },
    {
      "item":[
        {
          name:"MenuItem",
          ref:"5.0"
        },
        {
          name:"MenuItem",
          ref:"5.1"
        }
      ]
    },
    {
      "item":[
        {
          name:"MenuItem",
          ref:"6.0"
        },
        {
          name:"MenuItem",
          ref:"6.1"
        }
      ]
    },
    {
      "item":[
        {
          name:"MenuItem",
          ref:"7.0"
        },
        {
          name:"MenuItem",
          ref:"7.1"
        }
      ]
    }
  ];
  
}]);

app.directive('menuBar', ['$rootScope', function($rootScope){
   return {
  		restrict: 'E',
      templateUrl: 'menu.html',
      scope:{
        menuBar: '=',
        menuItemList: '='
      },
  		link: function (scope, element, attrs) {
		    
		    scope.menuClickInfo = '';
  		  scope.isOpen = false;
  		  var lastClickedMenu = null;
  	
  		  var showMenuContent = function(id){
		      for(var key in scope.menuBar){
		        if(scope.menuBar[key].id == id && scope.isOpen){
		          scope.menuBar[key].selected = true;
		        }else{
		          scope.menuBar[key].selected = false;
		        }
		      }
		    }
  		  
  		  scope.menuToggle = function(id){
  		    if(!scope.isOpen){
    		    scope.isOpen = !scope.isOpen;
  		    }else{
  		      if(lastClickedMenu == id){
    		      scope.isOpen = !scope.isOpen;
    		    }
    		    scope.menuClickInfo = '';
  		    }
  		    
  		    showMenuContent(id);
  		    lastClickedMenu = id;
  		  }
  		  
  		  scope.menuClick = function(ref){
  		    scope.menuClickInfo = 'Menu item clicked: '+ref;
  		  }
  		}
   }
}])

<div class="container">
  <div class="menu-bar">
    <div class="menu-click-info">{{menuClickInfo}}</div>
    <button type="text" ng-click="menuToggle(menuBarItem.id)" ng-repeat="menuBarItem in menuBar" ng-class="{'selected':menuBarItem.selected, 'non-selected':!menuBarItem.selected, 'first':$index == 0, 'last': $index == menuBarItem.length-1}">{{menuBarItem.name}}</button>
  </div>
  <div class="drop-down" ng-show="isOpen">
    <div ng-repeat="menuBarItem in menuBar" ng-show="menuBarItem.selected">
      <!-- add your menu content list (menuItemList) here -->
      <ul ng-repeat="menuItem in menuItemList[$index].item">
        <li><a href="#" ng-click="menuClick(menuItem.ref)">{{menuItem.name}} {{menuItem.ref}}</a></li>
      </ul>
    </div>
  </div>
</div>

.selected{
  background:yellow;
}

.container{
  padding:10px;
  margin:10px;
  border:solid 1px blue;
  text-align:right;
}

.menu-click-info{
  float:left;
}

.menu-bar{
  border:green solid 1px;
  padding:10px;
}

.drop-down{
  border:red 1px dashed;
  display:inline-block;
  padding:0 30px 0 0;
  margin:10px 0 0 0;
}

.drop-down.ng-hide-add, .drop-down.ng-hide-remove {
  transition: all linear 0.5s;
}

.drop-down.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}