angular ngmodel - AngularJS input not updating with ng-model -

i have form 3 input fields:

<form name="myform" novalidate ng-controller="maincontroller vm">     <div>         <input type="text" ng-model="vm.id" name="idinput" required>         <input type="email" ng-model="vm.email" name="emailinput" required>         <input type="text" ng-model="vm.output" name="output">     </div> </form> 

vm.output variable defined in controller contains strings plus vm.id , vm.email:

vm.output = 'myurl.com?id=' + vm.id + '&email=' + vm.email; 

i want generate output url based on user input in id , email fields. however, output-field not update when enter input 2 other fields. says myurl.com?id=undefined&email=undefined,

i can working if use

ng-value="'myurl.com?id=' + vm.id + '&email=' + vm.email"

however, i'm using ng-clip gets content copy using ng-model need use that.

also, here's controller:

angular     .module("app")     .controller("maincontroller",[maincontroller);  function maincontroller(){     var vm = this;      vm.output = 'myurl.com?id=' + vm.id + '&email=' + vm.email; } 

any suggestions?

you accomplish few different ways. 1 way set ng-change events on each of inputs want watch:

<div>     <input type="text" ng-model="vm.id" ng-change="updateoutput()" name="idinput" required />     <input type="email" ng-model="vm.email" ng-change="updateoutput()" name="emailinput" required />     <input type="text" ng-model="vm.output" name="output" /> </div> 

then, have build update method on controller scope:

app.controller = app.controller('maincontroller', function($scope) {      $scope.vm = {       output: '',       email: '',       id: ''     };      $scope.updateoutput = function() {       $scope.vm.output = 'myurl.com?id=' + $scope.vm.id + '&email=' + $scope.vm.email;     } }); 

here working plunker.