how to get selected element in angular js

Question

I am trying to get selected value of menu option .Actually In my demo when I click button it show menu option I want to get the selected element text when user click any select option from the menu and hide the menu .

How to get the selected item from menu or selected text from menu .First click button it show menu item Then select any element from menu then get the element from menu. http://codepen.io/anon/pen/RPaOQY

   link:function(scope,element,attr){

                $(element).menu();
              $(element).bind('click',function(){
                  alert('--')
                  isMenuVisibles=false;
              })

Answer 1

Directives designed to integrate with 3rd party libraries (such as jquery-ui menu in your use case)

use the proper convention

nope - <ul custommenu isMenuVisible="isMenuVisible"

good - <ul custommenu is-menu-visible="isMenuVisible"

when using a directive parameters, the case changes in the html and in the definition. read more about it here

Normalization

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase. For example, the following forms are all equivalent and match the ngBind directive:

---

To sum up,

i would modify your snippet like this:

http://codepen.io/Jossef/pen/eNZobv

html

  <div class="menu" ng-show="isMenuVisible">
    <ul custommenu is-menu-visible="isMenuVisible" selected-menu-item="selectedItem">
      <li class="ui-state-disabled">Aberdeen</li>
      <li>Ada</li>
      ...

js

app.directive('custommenu', function($timeout) {
      return {
        restrict: 'A',
        scope: {
          isMenuVisible: '=',
          selectedMenuItem: '='
        },
        link: function(scope, element, attr) {
          $(element).menu({
            select: function(event, ui) {
              scope.selectedMenuItem = ui.item.text();
              scope.isMenuVisible = false;
              $timeout(angular.noop);
            }
          });

        }
      }
    })