Angular input select all on click

select-all-controller.js

'use strict';
(function() {
    angular.module('notes')
        .controller('selectAllOnClickController', [selectAllOnClickController])

    function selectAllOnClickController() {
        var self = this;
        self.text = "Click me to select all"
    }
})();

select-all-directive-empty-controller.js

'use strict';
(function() {
  angular.module('note')
    .directive('selectAllOnClick', selectAllOnClick)
  function selectAllOnClick() {
      return {
         restrict: 'A',
         controller: ['$element', selectAllOnClickController],
         controllerAs: 'selectAllOnClickCtrl',
         bindToController: true
      }

      function selectAllOnClickController($element) {
         
      }
   }
})()

select-all-directive.js

'use strict';
(function() {
  angular.module('note')
    .directive('selectAllOnClick', selectAllOnClick)
  function selectAllOnClick() {
      return {
         restrict: 'A',
         controller: ['$element', selectAllOnClickController],
         controllerAs: 'selectAllOnClickCtrl',
         bindToController: true
      }

      function selectAllOnClickController($element) {
         $element.on('click', function() {
            var isInputSelected = $element[0].selectionEnd - $element[0].selectionStart != 0;
            if (!isInputSelected) {
               $element.select();
            }
         })
      }
   }
})()

select-all.html

<form class="form-inline">
   <div class="form-group">
     <input type="text" class="form-control" ng-model="selectAllOnClickCtrl.text" placeholder="Please input some text and test select all operation..." select-all-on-click />
   </div>
</form>