Why is my scope function not getting data passed from the model?

Question

I have a simple angular app that asks the user for a first and last name, but for some reason my changeBothNames() function is not getting the firstName and lastName models passed to it with the new values.

Here is my app as it stands:

 var app = angular.module("myApp", []); app.controller("mainCtrl", ["$scope", function($scope) { $scope.message = "hello"; $scope.firstName = ""; $scope.lastName = ""; $scope.fullName = $scope.firstName + " " + $scope.lastName; $scope.updateName = function() { $scope.fullName = $scope.firstName + " " + $scope.lastName; } $scope.changeBothNames = function(first, second) { alert("aye", first, second); $scope.firstName = first; $scope.lastName = second; $scope.updateName(); } } ]); 

 [ng-app="myApp"] [ng-controller="mainCtrl"] { max-width: 750px; margin: 50px auto 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } [ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="firstName"], [ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="lastName"] { padding: 5px; border: 0; border-bottom: 1px solid #ccc; margin-right: 10px; outline: 0; } [ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"] { border: 0; color: ghostwhite; padding: 15px; font-weight: 700; background-image: -webkit-linear-gradient(top, #00B6FF, #002D40); background-image: linear-gradient(to bottom, #00B6FF, #002D40); -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } [ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"]:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 5px 2px black; } [ng-app="myApp"] [ng-controller="mainCtrl"] [id="output"] [id="greeting"] { font-weight: 700; text-transform: capitalize; font-size: 24px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="mainCtrl"> <div class="row"> <input ng-model="firstName" placeholder="Enter a first name"> <input ng-model="lastName" placeholder="Enter a last name"> <button ng-click="changeBothNames(firstName, lastName)">Update Name</button> </div> <div class="row"> <div id="output" ng-if="fullName = ' ' "> <div id="greeting">{{firstName}} {{lastName}}</div> </div> <div id="output" ng-if="fullName != ' ' "> <div id="greeting">{{message}}</div>{{fullName}} </div> </div> </div> 

The model is obviously updating since you can see the output on the screen but for some reason its not being passed correctly, any ideas?

Answer 1

The values are being passed in but alert only takes one parameter. Change it to console.log and you'll see.

 var app = angular.module("myApp", []); app.controller("mainCtrl", ["$scope", function($scope) { $scope.message = "hello"; $scope.firstName = ""; $scope.lastName = ""; $scope.fullName = $scope.firstName + " " + $scope.lastName; $scope.updateName = function() { $scope.fullName = $scope.firstName + " " + $scope.lastName; } $scope.changeBothNames = function(first, second) { console.log("aye", first, second); document.getElementById('message').innerHTML = first + ' ' + second; $scope.firstName = first; $scope.lastName = second; $scope.updateName(); } } ]); 

 [ng-app="myApp"] [ng-controller="mainCtrl"] { max-width: 750px; margin: 50px auto 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } [ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="firstName"], [ng-app="myApp"] [ng-controller="mainCtrl"] [ng-model="lastName"] { padding: 5px; border: 0; border-bottom: 1px solid #ccc; margin-right: 10px; outline: 0; } [ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"] { border: 0; color: ghostwhite; padding: 15px; font-weight: 700; background-image: -webkit-linear-gradient(top, #00B6FF, #002D40); background-image: linear-gradient(to bottom, #00B6FF, #002D40); -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } [ng-app="myApp"] [ng-controller="mainCtrl"] [ng-click="changeBothNames(firstName, lastName)"]:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 5px 2px black; } [ng-app="myApp"] [ng-controller="mainCtrl"] [id="output"] [id="greeting"] { font-weight: 700; text-transform: capitalize; font-size: 24px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="mainCtrl"> <div class="row"> <input ng-model="firstName" placeholder="Enter a first name"> <input ng-model="lastName" placeholder="Enter a last name"> <button ng-click="changeBothNames(firstName, lastName)">Update Name</button> </div> <div class="row"> <div id="output" ng-if="fullName == ' ' "> <div id="greeting">{{firstName}} {{lastName}}</div> </div> <div id="output" ng-if="fullName != ' ' "> <div id="greeting">{{message}}</div>{{fullName}} </div> </div> </div> <pre id="message"></pre>