angular bind attribute

by MHD_SY

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script>
angular.module('x', ['ngMaterial', 'ngMessages'])
.controller("ctrl", function() {
  this.value = 'hello world';
  this.items = ['a', 'b', 'c', 'd'];
})
.directive("bindExpression", function($parse) {
  var directive = {};
  directive.restrict = 'E';
  directive.require = 'ngModel';
  directive.link = function(scope, element, attrs, ngModel) {
    scope.$watch(attrs.expression, function (newValue) {
      ngModel.$setViewValue(newValue);
    });
    ngModel.$render = function() {
      $parse(attrs.expression).assign(ngModel.viewValue);
    }
  };
  return directive;
});

</script>
<div ng-app="x">  
  <div ng-form="form" ng-controller="ctrl as ctrl">
     <div>
      selected item: {{ctrl.selectedItem}}
      <div ng-messages="form.selectedItem.$error" role="alert" style="color:red">
        <div ng-message="required">
          required
        </div>
      </div>
     </div> 
     <div>
       searchtext: {{ctrl.searchText}}
     </div>
      
    <md-autocomplete 
      md-selected-item="selectedItem"
      md-search-text="searchText"
      md-items="item in ctrl.items"
      md-min-length="0"
      >
      <md-item-template>
        {{item}}
      </md-item-template>
      </md-autocomplete>
      <bind-expression name="selectedItem" ng-required="true" expression="selectedItem" ng-model="ctrl.selectedItem" />
      <bind-expression...