Angular js Controller not working well

Question

function studentController($scope) {
  $scope.student = {
   firstName : "Mahesh",
   lastName : "Parashar",
   fullName : function() {
    var studentObject;
    studentObject = $scope.student;
    return studentObject.firstName + " " + studentObject.lastName;
   }
  };
 }

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<html><title>AngularJS First Application</title>
 <body><h1>Sample Application</h1>
  <div ng-app="" ng-controller="studentController">
   <p>
    Enter your Name:<input type="text" ng-model="data">
   </p>
   <p>
    Hello <span ng-bind="data"></span>!
   </p>
  </div>

  <br />
  <table border="1px">
  <tr><th>Fisrt Name</th><th>Last Name</th><th>Full Name</th></tr>
  <tr><td>student.firstName</td><td>student.lastName</td><td>student.fullName</td></tr>

  </table>
  <script src="angular.min.js"></script>
 </body>
</html>

<script>
 
</script>

I am new in Angular js and start to make program but ng-controller not working,When I added a ng-controller="studentController" normal angular ng-bind="data" program also not working so Please anyone help me out what's wrong in it.

Thanks

Priyanka Sankhala

Possible Duplicate of - https://stackoverflow.com/questions/26602883/angularjs-ng-controller-not-working — Utkarsh Dubey, Jun 10 '17 at 11:47

score 1 · Answer 1 · answered Jun 10 '17 at 11:47

There are many issues with your code!

(i) Your angular version and the way you've defined the controller. You should have a module name declared as follows,

ngular.module('myApp',[])

(ii) Use the expression {} with the model name in your HTML, example,

{{student.firstName}}

(iii) fullName is a function so you need to call like,

<td>{{student.fullName()}}</td>

DEMO

angular.module('myApp',[]).controller('studentController', function($scope){
  $scope.student = {
   firstName : "Mahesh",
   lastName : "Parashar",
   fullName : function() {
    var studentObject;
    studentObject = $scope.student;
    return studentObject.firstName + " " + studentObject.lastName;
   }
  };
          
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<title>AngularJS First Application</title>
<body>
    <h1>Sample Application</h1>
    <div ng-app="myApp" ng-controller="studentController">
        <p>
            Enter your Name:<input type="text" ng-model="data">
        </p>
        <p>
            Hello <span ng-bind="data"></span>!
        </p>
        <br />
        <table border="1px">
            <tr>
                <th>Fisrt Name</th>
                <th>Last Name</th>
                <th>Full Name</th>
            </tr>
            <tr>
                <td>{{student.firstName}}</td>
                <td>{{student.lastName}}</td>
                <td>{{student.fullName()}}</td>
            </tr>
        </table>
    </div>
</body>

score 0 · Answer 2 · answered Jun 10 '17 at 11:47

you should define an app for the angular and add a controller under it

    angular.module('app', []).controller('studentController', function($scope) {
  $scope.student = {
        firstName : "Mahesh",
        lastName : "Parashar",
        fullName : function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
        }
    };
});

Then add the app name in ng-app

score 0 · Answer 3 · answered Jun 11 '17 at 18:58

I have tried to modify this program little bit to get it working and code is as below.

JavaScript.js

    var app = angular.module("app", [])
    .controller("studentController", studentController);

    function studentController($scope) {
    $scope.student = {
        firstName: "Mahesh",
        lastName: "Parashar",
    };
    $scope.getFullName = function () {
        var studentObject;
        studentObject = $scope.student;
        //return studentObject.firstName + " " + studentObject.lastName;
        $scope.student.fullName = studentObject.firstName + " " + studentObject.lastName;
    }
}

HtmlPage

<html>
<head>
    <title>AngularJS First Application</title>
</head>
<body>
    <h1>Sample Application</h1>
    <div ng-app="app" ng-controller="studentController">
        <p>
            Enter your Name:<input type="text" ng-model="data">
        </p>
        <p>
            Hello <span ng-bind="data"></span>!
        </p>


        <br />
        <table border="1px">
            <tr><th>Fisrt Name</th><th>Last Name</th><th>Full Name</th></tr>
            <tr><td>{{student.firstName}}</td><td>{{student.lastName}}</td><td>{{student.fullName}}</td></tr>
            <tr> <input type="button" value="Get Full Name" ng-click="getFullName()"/> </tr>
        </table>
    </div>
    <script src="../angular.js"></script> <!--This is the angularJS libyrary file-->
    <script src="JavaScript.js"></script> <!--This is your java script file-->
</body>
</html>

Please let me know if you need if it works for you or not.

Angular js Controller not working well

3 Answers3