Angular highlight/select all content inside <div> element Angular

Question

How do we highlight and select all content inside a element on click using Angular JS ?. It is easy to do using inputbox. But how do we do for element.

Help would be appreciated.

Thank you

This is what I have used so far.

HTML

<div ng-controller="appController" ng-app="app">
    <input type="text" ng-model="content" ng-click="onTextClick($event)" />
</div>

JS

var app = angular.module('app', []);
  app.controller('appController',
    function ($scope) {
        $scope.content = 'test';
        $scope.onTextClick = function ($event) {
            $event.target.select();
        };
    });

http://jsfiddle.net/onury/R63u5/

Answer 1

jsfiddle: http://jsfiddle.net/n63LhtcL/3/

Here is an updated directive to achieve it:

.directive('selectOnClick', function ($window) {
    return {
        link: function (scope, element) {
            element.on('click', function () {
                var selection = $window.getSelection();        
                var range = document.createRange();
                range.selectNodeContents(element[0]);
                selection.removeAllRanges();
                selection.addRange(range);
            });
        }
    }
});

Your markup:

<div select-on-click>
    Some text...
    <input type="text" ng-model="content"  />
</div>