AngularJs create a drop-down sidebar menu

angular.module('app', [])
  .directive('sidebar', function(menuitems) {
    return {
      restrict: 'EA',
      template: '<ul class="sidebar">' +
        '<li class="menuitem" ng-class="{active: item.active, subitems: !!item.subitems}" ng-repeat="item in menuitems" ng-click="toogleItem($index)">' +
        '<a ng-href="{{item.href}}" ng-if="item.href">{{item.title}}</a>' +
        '<menuitem item="item" ng-if="!item.href"></menuitem>' +
        '</li>' +
        '</ul>',
      link: function($scope) {
        $scope.menuitems = menuitems;

        $scope.toogleItem = function(index) {
          $scope.menuitems.forEach(function(item, idx) {
            item.active = index === idx && (!item.active || !item.subitems);

            if (!item.active && item.subitems) {
              item.subitems.forEach(function(si) {
                si.active = false;
              });
            }
          });
        }
      }
    };
  })
  .directive('menuitem', function() {
    return {
      restrict: 'EA',
      scope: {
        item: '='
      },
      template: '<span>{{item.title}}</span>' +
        '<ul ng-if="item.subitems" ng-show="item.active">' +
        '<li class="menuitem sub" ng-repeat="subitem in item.subitems" ng-class="{active: subitem.active}" ng-click="toogleSubItem($event, $index)">' +
        '<a ng-href="{{subitem.href}}" ng-if="subitem.href">{{subitem.title}}</a>' +
        '<span ng-if="!subitem.href">{{subitem.title}}</span>' +
        '</li>' +
        '</ul>',
      link: function($scope, $element) {
        $scope.toogleSubItem = function($event, index) {
          $event.stopPropagation();
          $scope.item.subitems.forEach(function(item, idx) {
            item.active = index === idx;
          });
        }
      }
    };
  })
  .factory('menuitems', function() {
    return [{
      title: 'Item1',
      href: '#item1'
    }, {
      title: 'Item2',
      subitems: [{
        title: 'Subitem 1',
        href: '#subitem 1'
      }, {
        title: 'Subitem 1',
        href: '#subitem 1'
      }]
    }, {
      title: 'Item3',
      href: '#item3'
    }];
  });

ul {
  list-style: none;
  padding: 0;
}
a,
a:visited,
a:hover {
  text-decoration: none;
  color: white;
}
ul.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 200px;
  background-color: #322f30;
  color: white;
}
.menuitem {
  position: relative;
  padding: 10px;
  margin: 0;
  cursor: pointer;
}
.menuitem.active {
  background-color: #238db0;
}
.menuitem.active:hover {
  background-color: #238db0;
}
.menuitem:hover {
  background-color: royalblue;
}
.menuitem.subitems:after {
  content: '˅';
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
  bottom: 0;
  padding-top: 10px;
}
.menuitem.sub.active {
  background-color: #0c3441;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <sidebar></sidebar>
</div>

var menuController = function(){
  var ctrl = this;
  
  ctrl.opened = false;

  ctrl.toggle = function(){
    ctrl.opened = !ctrl.opened;
  };
};


angular
.module('directiveApp', [])
.controller('controllerApp', ['$scope', function($scope) {
  $scope.menus = [
    {name: 'menu 1'},
    {name: 'menu 2'},
    {name: 'menu 3'},
    {name: 'menu 4'},    
  ];
}])
.component('menuComponent', {
  template: "<p class='menu' ng-click='$ctrl.toggle()'>{{$ctrl.name}}</p><ul ng-show='$ctrl.opened'><li>submenu</li></ul>",
  controller: menuController,
  bindings: {
    name: '<'
  }
});
  

.menu {
  display:inline-block;
  padding:10px;
  border:1px solid red;
  overflow:hidden;
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>


<div ng-app="directiveApp">
  <div ng-controller="controllerApp">
    <p>Menus</p>
    
    <menu-component ng-repeat="menu in menus" name="menu.name" />

  </div>
</div>