How to achieve functional binding with the ng-model (with plnkr)

Question

I have a dob column and the values ​​appear in the format yyyy-mm-dd say 2013-01-01, and I need to show it in the input box as January 1st. I can achieve this by writing a function, and then return the exact value from this function. But the function cannot be called from the input field using ng-model, where it can be called using ng-bind in runs. I can understand that calling a function in an input field will result in a two-way binding break. But what other approach can I use for this.

http://plnkr.co/edit/pZDpypsxM1OA2JwFhjjp?p=preview

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script type="text/javascript" > var app = angular.module('app', []); app.controller('AppCtrl', function ($scope) { $scope.dob = "2013-01-01"; $scope.getDateOfBirth = function(dob){ var months = ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sep","Oct","Nov","Dec"] var split = dob.split("-"); return parseInt(split[2])+" "+months[parseInt(split[2])-1]; } }); </script> <span ng-app="app" ng-controller="AppCtrl" ng-bind="getDateOfBirth(dob)"></span> <input type="text" ng-model="getDateOfBirth(dob)"/> 

Answer 1

You can use ng-init to assign the value returned by the function and assign it to the model:

 <input ng-init="myDOB = getDateOfBirth(dob);" type="text" ng-model="myDOB"> 

Demo

Answer 2

You can use ng-init to set the value and ng-change to save the updated value

http://plnkr.co/edit/q1hg0R?p=preview

Answer 3

For dates, phone numbers, etc. you can use ui-mask. Hope this helps someone!