Close button in <Md-select>

Question

I am using the material angular, and I need a close button when I select the select, it only closes the box if you click outside, below has an example:

HTML:

<div ng-controller="MyCtrl" layout layout-align="center center">
    <md-select ng-model="myModel" placeholder="Escolha" ng-change="onChange()" md-on-open="onOpen()">
        <md-option value="0">Opção A</md-option>
        <md-option value="1">Opção B</md-option>
        <button>fechar (x)</buton>
    </md-select>
</div>

Javascript:

angular.module('MyApp', ['ngMaterial'])
.controller('MyCtrl', function ($scope) {
    $scope.onChange = function() {
        //alert('on change');
    };

    $scope.onOpen = function() {
        //alert('on open');
    };
})

https://jsfiddle.net/samucsouza/0bsgpe1n/5/

---

I did it that way, but it didn’t work:

 <md-button ng-click="fechar()">Botão fechar select</md-button>


    $scope.fechar = function () {
      $mdSelect.hide();
    };

ReferenceError: $mdSelect is not defined

Answer 1

Add a ng-click on the button with the following code:

$mdSelect.hide();

EDIT 1

You must inject the $mdSelect dependency into the controller statement:

angular
  .module('MyApp', ['ngMaterial'])
  .controller('MyCtrl', function ($scope, $mdSelect) {
  $scope.fechar = function() {
    $mdSelect.hide();
  }
}

Answer 2

You can use the ng-click just denying his condition in the click, and use the ng-show, or ng-hide, however you prefer:

angular
  .module('MyApp', ['ngMaterial'])
  .controller('MyCtrl', function ($scope) {
    $scope.display_box = true;
}

That alone should work:

 <button ng-click="display_box=!display_box;"
         ng-class="{active:display_box=!display_box}">fechar (x)
 </buton>
 <md-select ng-show="display_box" ng-model="myModel...>
   conteúdo que irá ser escondido
 </md-select>