title: Vertical menu bootstrap and angular
body: <p>I'm trying to create vertical menu like this <a href="http://themicon.co/theme/angle/v1.6/#/app/dashboard" rel="nofollow noreferrer">site</a> . the thing i'm looking for is : when menu is collapse sub menus open with hover and when menu is open , sub menus open below the links .</p>
  
  <p>Here is my <a href="http://jsfiddle.net/zqdmny41/" rel="nofollow noreferrer"><strong>JSFiddle</strong></a> , what i've done is : i can open the menu after click the button .<br>
  sub menu is working (last one) <strong>but</strong> i don't want to open submenu when menu is collapsed .      </p>
  
  <p><strong>Angular</strong>  </p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  app.controller('mainCtrl', function ($scope) {
  
      $scope.noneStyle = false;
      $scope.bodyCon = false;
      $scope.sasd = "asd";
  
  
      //Toggle the styles
      $scope.toggleStyle = function () {
          //If they are true, they will become false 
          //and false will become true
          $scope.bodyCon = !$scope.bodyCon;
          $scope.noneStyle = !$scope.noneStyle;
      }
  
  
  });  
  </code></pre>
  
  <p><strong><em>UPDATE</em></strong>    </p>
  
  <p><strong>menu with submenu :</strong>   </p>
  
  <p><img src="https://i.stack.imgur.com/CXov9.png" alt="enter image description here"></p>
  
  <p><strong>submenu open with hover</strong><br>
  <img src="https://i.stack.imgur.com/blmgj.png" alt="enter link description here">   </p>
  
  <p>that's what i want !!
  thx in advance</p>