Here, the plunkr fixed solution is updated to 1.1.1 from angular to use the ng-trim directive, which allows you to disable cropping: http://plnkr.co/edit/FLCQY2zuRV1ZMy6WCbs8?p=preview
Upgrading to angular 1.1.1 or higher (tested, may work in some lower versions) add this directive to your element where you have an ng-model that you do not want to crop.
ng-trim="false"
Here is the full information:
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require=" angular.js@1.1.x " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.min.js" data-semver="1.1.1"></script> <script src="angular_ui.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <form> Pass length is {{pass.length}}<br> <input type="password" data-ng-model="pass" data-ng-trim="false"> </form> </body> </html>
And js
var app = angular.module('plunker', ['ui.event']); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; });
source share