AngularJS Simple Example

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<div ng-app="myapp">
<div ng-controller="LoginController">
    <div>Hello {{ user.firstName }}</div>
    <input ng-model="user.firstName" keypressdetector />
    <input type="submit" ng-click="login()" value="Login"/>
    <div ng-repeat="login in logins">{{ login }}</div>
</div>
</div>

JavaScript

var app = angular.module('myapp', []);
app.controller('LoginController',function($scope){
$scope.user = {
        firstName: "Foo",
        lastName: "Bar"
    };
    $scope.logins = [];
    $scope.login = function () {
        $scope.logins.push($scope.user.firstName + " was logged in.");
    };
});

app.directive('keypressdetector', function($compile){
	return {
  	restrict:'AEC',
    link: function(scope, element, attrs){
    	element.bind("keypress", function (event) {
            if(event.which === 13) {
							var selectionStart = element[0].selectionStart;
              var value = element.val();
              var valueLength = value.length;
              var newValue= '';
              if (selectionStart == valueLength){
              	newValue = value;
              } else {
              	newValue = value.substring(selectionStart, valueLength);
              }
              var newElement = angular.element('<input type="text" value="' + newValue +'"/>')
              angular.element(document.body).append(newElement);
            }
        });
    }
  };
});