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

Question

How to select and select all content inside an element when clicking Angular JS ?. This is easy to do with input. But how do we do it for an element.

Help will be appreciated.

thank

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 the 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>