angularjs not updating model value - angularjs

Question

In my example I want to update model when user focus the textfield. In short append 'px' string to the existing value.
HTML:
<div ng-app>
<div ng-controller="PixelCtrl">
<div>
{{pixel}}
</div>
<input type="text" ng-focus="updatePX($event)" ng-model="pixel" />
</div>
</div>
JS:
function PixelCtrl($scope) {
$scope.pixel = "120";
$scope.updatePX = function(e){
debugger;
alert(e.target.value);
e.target.value = e.target.value + "px";
$scope.$apply();
}
}
As you all can see I have also used $scope.$apply. Most likely I am doing something wrong.
JSFIDDLE: https://jsfiddle.net/ashwyn/U3pVM/27621/

Answer 1

You don't need to manually add the 'px' text. Simply add it by default
function PixelCtrl($scope) {
$scope.pixel = "120";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="PixelCtrl">
<div ng-show="pixel">
{{pixel}} px
</div>
<input type="text" ng-model="pixel" />
</div>
</div>

Answer 2

You must include 1.2.1 angular version. Here is your solution: jsfiddle
<div ng-app>
<div ng-controller="PixelCtrl">
<div>
{{pixel}}
</div>
<input type="text" ng-focus="updatePX($event)" ng-model="pixel" />
</div>
</div>
function PixelCtrl($scope) {
$scope.pixel = "120";
$scope.updatePX = function(e){
e.target.value = e.target.value + "px";
$scope.pixel=e.target.value;
}
}

Answer 3

As #Alexandru Mihai said, upgrade angular version.
See example on jsfiddle.
angular.module("testApp", [])
.controller("PixelCtrl", function($scope) {
$scope.pixel = "120";
$scope.updatePX = function(e) {
if ($scope.pixel && $scope.pixel.indexOf("px") === -1)
$scope.pixel += "px";
}
})
.directive("myPixel", function() {
return {
require: "ngModel",
link: function(scope, element, attr, ngModel) {
element.on("focus", function() {
var val = ngModel.$viewValue;
if (val && val.indexOf("px") === -1) {
ngModel.$setViewValue(ngModel.$viewValue + "px");
element.val(ngModel.$viewValue);
}
})
}
}
})
.directive("myPixelBetter", function() {
return {
scope: {
value: "=myPixelBetter"
},
link: function(scope, element) {
element.on("focus", function() {
if (scope.value && scope.value.indexOf("px") === -1) {
scope.value += "px";
scope.$apply();
}
})
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="testApp">
<div ng-controller="PixelCtrl">
<div>
{{pixel}}
</div>
<div>
With ng-focus
<input type="text" ng-focus="updatePX()" ng-model="pixel" />
</div>
<div>
With custom directive
<input type="text" my-pixel ng-model="pixel" />
</div>
<div>
With custom directive. Better solution
<input type="text" my-pixel-better="pixel" ng-model="pixel" />
</div>
</div>
</div>