I'm currently using md-menu from Angular Material and I have integrated a search box with ng-model in the list. However, I am facing an issue where I cannot access ng-model because 'md-menu-content' is out of scope. Here is my code:
<div ng-controller="myController">
<md-menu style="margin:auto 0;" md-position-mode="target-right target" md-offset="-40 0">
<md-button ng-click="$mdMenu.open($event)" class="md-icon-button" aria-label="list">
<i class="material-icons" md-menu-origin style="color:#006487;"></i>
</md-button>
<md-menu-content width="4">
<md-menu-item>
<input autofocus type="search" placeholder="Search in Line Items" id="table-search-inp" aria-label="search for line item" ng-model="searchLineItemText" ng-model-options="{ debounce: {default: 500} }" />
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
And here is the controller:
angular
.module('app')
.controller('myController', myController);
QuoteLineItemController.$inject = ['$scope', '$rootScope'];
function QuoteLineItemController($scope, $rootScope){
$scope.searchLineItemText = '';
$scope.$watch('searchLineItemText', function (newValue, oldValue) {
if (newValue !== oldValue && newValue) {
fetchSearchedLineItems(newValue);
}
});
};
Any assistance would be greatly appreciated.