Vertical menu bootstrap and angular

I'm trying to create vertical menu like this site . 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 .

Here is my JSFiddle , what i've done is : i can open the menu after click the button .
sub menu is working (last one) but i don't want to open submenu when menu is collapsed .

Angular

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;
    }


});  

UPDATE

menu with submenu :

submenu open with hover

that's what i want !! thx in advance