AngularJS on screen keyboard

<!DOCTYPE html>
<html ng-app="ngKeyboard">
<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body>
    <div class="container">
        <input type="text" my-text="" style="width: 100%"/>
        <div ng-controller="MainDivCtrl">
            <div class="keyboard-container">
                <ul ng-repeat="row in layout" style="list-style-type: none;">
                    <li ng-repeat="element in row.row" class="btn" ng-click="keyPressed(element.value, element.action)">
                      {{element.value}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

var app = angular.module('ngKeyboard', []);

app.controller('MainDivCtrl', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http) {
    $http.get('layout.json').success(function(data) {
        $scope.layout = data;
    });
    
    $scope.keyPressed = function(value, action){
        $scope.someInput = value;
        $rootScope.$broadcast('keyPressed', $scope.someInput, action);
    }
}]);

app.directive('myText', ['$rootScope', function($rootScope) {
    return {
        link: function(scope, element, attrs) {
            $rootScope.$on('keyPressed', function(e, val, action) {
                var domElement = element[0];
                if (document.selection) {
                    domElement.focus();
                    var sel = document.selection.createRange();
                    sel.text = val;
                    domElement.focus();
                }
                else if (domElement.selectionStart || domElement.selectionStart === 0) {
                    var startPos = domElement.selectionStart;
                    var endPos = domElement.selectionEnd;
                    var scrollTop = domElement.scrollTop;
                    
                    if(action === 'del'){
                        if(startPos === endPos){
                            domElement.value = domElement.value.substring(0, startPos-1) + domElement.value.substring(endPos, domElement.value.length);
                            domElement.focus();
                            domElement.selectionStart = startPos - 1;
                            domElement.selectionEnd = startPos - 1;
                        }
                        else{
                            domElement.value = domElement.value.substring(0, startPos) + domElement.value.substring(endPos, domElement.value.length);
                            domElement.focus();
                            domElement.selectionStart = startPos;
                            domElement.selectionEnd = startPos;
                        }

                        domElement.scrollTop = scrollTop;
                    }
                    else{
                        domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
                        domElement.focus();
                        domElement.selectionStart = startPos + val.length;
                        domElement.selectionEnd = startPos + val.length;
                        domElement.scrollTop = scrollTop;
                    }
                } else {
                    domElement.value += val;
                    domElement.focus();
                }
            });
        }
    }
}]);

.btn{
    background-color: gray;
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin-left: 5px;
    border-radius: 3px;
    border: solid 1px black;
}

.btn:hover{
    background-color: aliceblue;
}

.keyboard-container{
    display: inline-block;
    text-align: center;
}

.keyboard-container ul{
    padding-left: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.container{
  background-color: #F8F8F8 ; 
  display:inline-block; 
  padding: 15px; 
  text-align:center;
}

[
    {"row": [
        {"value": "1", "action": "char"},
        {"value": "2", "action": "char"},
        {"value": "3", "action": "char"},
        {"value": "4", "action": "char"},
        {"value": "5", "action": "char"},
        {"value": "6", "action": "char"},
        {"value": "7", "action": "char"},
        {"value": "8", "action": "char"},
        {"value": "9", "action": "char"},
        {"value": "0", "action": "char"}
    ]},
    {"row":[
        {"value": "q", "action": "char"},
        {"value": "w", "action": "char"},
        {"value": "e", "action": "char"},
        {"value": "r", "action": "char"},
        {"value": "t", "action": "char"},
        {"value": "y", "action": "char"},
        {"value": "u", "action": "char"},
        {"value": "i", "action": "char"},
        {"value": "o", "action": "char"},
        {"value": "p", "action": "char"}
    ]},
    {"row":[
        {"value": "a", "action": "char"},
        {"value": "s", "action": "char"},
        {"value": "d", "action": "char"},
        {"value": "f", "action": "char"},
        {"value": "g", "action": "char"},
        {"value": "h", "action": "char"},
        {"value": "j", "action": "char"},
        {"value": "k", "action": "char"},
        {"value": "l", "action": "char"}
    ]},
    {"row":[
        {"value": "z", "action": "char"},
        {"value": "x", "action": "char"},
        {"value": "c", "action": "char"},
        {"value": "v", "action": "char"},
        {"value": "b", "action": "char"},
        {"value": "n", "action": "char"},
        {"value": "m", "action": "char"}
    ]},
    {"row":[
        {"value": "←", "action": "del"},
        {"value": "@", "action": "char"},
        {"value": ".", "action": "char"},
        {"value": "-", "action": "char"},
        {"value": "_", "action": "char"}
    ]}
]