AngularJs DropDown Menu

<div ng-app="rgMenu" ng-controller="MenuController">

    <ul>
        <!-- Iterate over and display main menu items -->
        <li class="main btn" ng-repeat="item in items" ng-click="showSubMenu(item,$index)">
            <!--<a class="btn" >{{item.title}}</a>-->
            {{item.title}}
        </li>
    </ul>
    <div style="clear:both;"></div>

    <!-- The ng-style directive allows you to assign a style property
         to an element. Updates to the property will be immediately
         reflected in the view. See tje showSubMenu function in app.js -->
    <ul ng-style="subLeft">
        <!-- Iterate over and display submenu items -->
        <li class="sub" ng-repeat="sublink in sublinks">
            <a class="btn fullwidth" ng-href="{{sublink.href}}" target="{{sublink.target}}" >{{sublink.title}}</a>
        </li>
    </ul>

    <div style="clear:both;"></div>

</div>

var app = angular.module("rgMenu",[]);

app.controller("MenuController",function($scope, $http) {

    $scope.items = [
    {"itemId":1, "title":"Google", "description":"Google Search Engine",
     "sublinks":[
            {"title":"Google1", "href":"http://google.com/", "target":"_blank"},
            {"title":"Play", "href":"http://play.google.com/", "target":"_blank"},
            {"title":"Plus", "href":"http://plus.google.com/", "target":"_blank" }
    ]},
    {"itemId":2, "title":"Yahoo", "description":"Yahoo Search Engine",
        "sublinks":[
            {"title":"Yahoo", "href":"http://yahoo.com/", "target":"_blank" },
            {"title":"Sports", "href":"http://sports.yahoo.com/", "target":"_blank" },
            {"title":"News", "href":"http://news.yahoo.com/", "target":"_blank" }
        ]},
    {"itemId":3, "title":"Bing", "description":"Bing Search Engine",
         "sublinks":[
            {"title":"Bing", "href":"http://www.bing.com", "target":"_blank" },
            {"title":"Entertainment", "href":"http://www.bing.com/entertainment", "target":"_blank" },
            {"title":"Videos", "href":"http://www.bing.com/videos/browse?FORM=L8SP7", "target":"_blank" }
         ]},
    {"itemId":4, "title":"Dogpile", "description":"Dogpile Search Engine",
         "sublinks":[
             {"title":"Dogpile", "href":"http://www.dogpile.com", "target":"_blank"},
             {"title":"FAQ", "href":"http://www.dogpile.com/info.dogpl.t6.1/support/Faqs", "target":"_blank"},
             {"title":"Contact", "href":"http://m.dogpile.com/support/contactus", "target":"_blank" }
        ]}
    ];

    // Defaults
    $scope.sublinks = null;
    $scope.activeItem = null;

    // Default submenu left padding to 0
    $scope.subLeft = {'padding-left':'0px'};

    /*
     * Set active item and submenu links
     */
    $scope.showSubMenu = function(item,pos) {
        // Move submenu based on position of parent
        $scope.subLeft = {'padding-left':(80 * pos)+'px'};
        // Set activeItem and sublinks to the currectly
        // selected item.
        $scope.activeItem = item;
        $scope.sublinks = item.sublinks;
    };

});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<style>
body {
    font-family: Helvetica,Arial;
    font-size: 10pt;
}

ul {
    margin:0;
    padding:0;
}

li {
    margin:0;
    padding:0;
    list-style: none;
    text-align: center;
    line-height:27px;
    cursor: pointer;
    border-radius: 4px;
    border:1px solid #111;
    background-color: #0072BA;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0B5BA1), to(#012238));
    background-image: -moz-linear-gradient(19% 75% 90deg,#012238, #0B5BA1);
    box-shadow: inset 0 1px 0 0 #a5b9d9;
}

li:hover {
    background-color: #458cff;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0D6CBF), to(#023F69));
    background-image: -moz-linear-gradient(19% 75% 90deg,#023F69, #0D6CBF)
}

li:active {
    background-color: #333;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#111111));
    background-image: -moz-linear-gradient(19% 75% 90deg,#111111, #666666)
}

li:hover {
    background-color: #458cff;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0D6CBF), to(#023F69));
    background-image: -moz-linear-gradient(19% 75% 90deg,#023F69, #0D6CBF)
}

li:active {
    background-color: #333;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#111111));
    background-image: -moz-linear-gradient(19% 75% 90deg,#111111, #666666)
}

.main {
    float: left;
    margin-top:5px;
    width:78px;
}

.sub {
    margin:0;
    width:120px;
    background-color: #005D96;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6C1299), to(#220630));
    background-image: -moz-linear-gradient(19% 75% 90deg,#220630, #6C1299)
}

.sub:hover {
    background-color: #450C61;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8C17C7), to(#450C61));
    background-image: -moz-linear-gradient(19% 75% 90deg,#450C61, #8C17C7)
}

.sub:active {
    background-color: #111;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#111111));
    background-image: -moz-linear-gradient(19% 75% 90deg,#111111, #666666)
}

.btn {
    color:#fff;
    text-decoration: none;
}

.fullwidth {
    /* inline-block allows the anchor tag to fill
       the entire width of the list item */
    display:inline-block;
    width:100%;
}