Why my second ng-model does not return value as inserted?

Question

I have this code with textarea1 and textarea2. My problem I was unable to manipulate the ng-model on textarea2.

If I change anything in textarea2...nothing was happened

Anyone can help me figure out this problem? Thanks.

You may see the codes I've done so far.

 var myApp = angular.module('myApp',[]); //myApp.directive('myDirective', function() {}); //myApp.factory('myService', function() {}); function MyCtrl($scope) { $scope.model1 = "Test1"; $scope.catch = function(model1) { $scope.model2 = model1; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="MyCtrl"> Textarea 1 <textarea onkeypress="{{catch(model1)}}" ng-model="model1"></textarea> <br/> Text area 2 <textarea ng-model="model2"></textarea> <hr/> Textarea1: {{model1}} <br/> Textarea2: {{model2}} </div> </div> 

Answer 1

Can you change onkeypress for ng-change ?

 var myApp = angular.module('myApp',[]); //myApp.directive('myDirective', function() {}); //myApp.factory('myService', function() {}); function MyCtrl($scope) { $scope.model1 = "Test1"; $scope.catch = function(model1) { $scope.model2 = model1; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="MyCtrl"> Textarea 1 <textarea ng-change="catch(model1)" ng-model="model1"></textarea> <br/> Text area 2 <textarea ng-model="model2"></textarea> <hr/> Textarea1: {{model1}} <br/> Textarea2: {{model2}} </div> </div>