Toggle only 1 submenu on li ng-click and not allow another li to open

I have a working menu after reading the docs and examples & implementing it with basic ngAnimate - css3 transition but I really don't know how to go about it so bear with me.

1. how to toggle only 1 li submenu at a time & not let the other one open because it's overflowing
2. onclick (anywhere if possible) outside of that menu / submenu close the active submenu
3. my css3 ngAnimate is animating the li elements that don't have subitems, how do i check that and give it the toggle class only if it has subitems?

Here is my html code for menu & i'm using ng-repeat to repeat li & it's submenu from my controller -

<ul class="navigation">
  <div class="" layout="column">
    <li md-ink-ripple="#ebeef4"
        ng-repeat="item in items"
        class="item {{item.id}}"
        ng-click="states.activeItem=item.title;
                  itemClicked = !itemClicked">
      <span>
        <i class="material-icons md-24 center-icons">{{item.icon}}</i>
      </span>
      <a class="title" ng-href="#!{{item.route}}">{{item.title}}</a>
      <span>
        <i class="material-icons md-18 subicon-openstate" id="test-icons">{{item.subicon}}</i>
      </span>
      <ul class="submenu" id="submenu-item-hover" ng-if="itemClicked">
        <li ng-repeat="subItem in item.subItems" class="subItem">
          <a href="#!{{subItem.subroute}}">{{subItem.title}}</a>
        </li>
      </ul>
    </li>
  </div>
</ul>

you can see i'm using ng-if on the submenu i.e. 2nd ul to check if it's clicked and when it returns true it uses this css code -

#submenu-item-hover.ng-enter {
  transition: all ease-in 0.3s;
  height: 0px;
  opacity: 0;
}

#submenu-item-hover.ng-enter.ng-enter-active {
  height: 144px;
  opacity: 1;
}

#submenu-item-hover.ng-leave {
  height: 144px;
  opacity: 1;
}

#submenu-item-hover.ng-leave.ng-leave-active {
  transition: all ease-in 0.3s;
  height: 0px;
  opacity: 0;
}

But the problem is it opens/closes fine if i click on only 1 of the li with subitems but when i click on the 2nd one that also opens causing overflow vertically(sidenav) And if i click on the li which has no submenu that also opens to 144px height :s so how do i go about it?. Also lastly how to write onclick (outside menu function) to toggle(close) the active submenu.

edit- adding controller file too

controller -

app.controller('NavigationController', function($scope) {
  $scope.states = {};
  $scope.states.activeItem = '';
  $scope.items = [{
    id: 'item1',
    title: 'Dashboard',
    icon: 'dashboard',
    subicon: 'arrow_drop_down',
    route: 'dashboard',
    subItems: [{
        title: 'Page Visitors',
        subroute: 'page-visitors',
      },
      {
        title: 'Post Performace',
        subroute: 'post-performance',
      },
      {
        title: 'Team Overall',
        // subroute: '/team-overall',
      }
    ]
  }, {
    id: 'item2',
    title: 'Calendar',
    icon: 'calendar_today',
  }, {
    id: 'item3',
    title: 'Inbox',
    icon: 'inbox',
    subicon: 'unfold_more',
    subItems: [{
        title: 'New Mail',
        // subroute: '/new-mail',

      },
      {
        title: 'Scoial',
        // subroute: '/new-social',
      },
      {
        title: 'Updates',
        // subroute: '/new-updates',
      }
    ]
  }, {
    id: 'item4',
    title: 'Invoicing',
    icon: 'insert_drive_file',
  }, {
    id: 'item5',
    title: 'Lab / Experimental',
    icon: 'build',
  }];
});