I am facing an issue with a simple view that contains an input text field where the user enters their name. The controller should retrieve this value and assign it to the employeeDescription
variable. However, the ng-model value from the input field is not reaching the controller. I have attempted using $watch as suggested by Radim Köhler onStack Overflow, but it did not work. I believe there must be a straightforward solution to this problem.
I also tried retrieving the name
variable (ng-model) directly from the $scope using
$scope.employeeDescription = $scope.name;
, but it did not fetch the value. There was no output in the Google Chrome console regarding this issue. Is there any possible solution?
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-app='angularApp'>
<div ng-controller='nameController'>
<div>
Name <input type="text" ng-model='name' />
</div>
Welcome {{employeeDescription}}
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
(function(angular) {
var myAppModule = angular.module('angularApp', []);
myAppModule.controller('nameController', function($scope) {
$scope.employeeDescription = name;
});
})(window.angular);