Unable to execute controller function using angular.js

Question

My controller function is not called at all using Angular.js.I am explaining my code below.

admin.html:

<head ng-app="adminModule">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Odia Doctor Admin Panel</title>

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive -->  

</head>
<body style="background-image: url('images/resource/login-bg.jpg')" ng-controller="admincontroller">

<div class="login-sec">
    <div class="login-sec">
    <div class="login">
        <div class="login-form">
            <span><img src="images/logo.png" alt="" /></span>
            <h5><strong>Identify</strong> Yourself</h5>
            <center ng-hide="lStatus">{{loginStatus}}</center>
            <form action="#" method="post">
                <fieldset><input type="text" placeholder="Username" class="logininputdiv" /><i class="fa fa-user"></i></fieldset>
                <fieldset><input type="password" placeholder="Password" class="logininputdiv" /><i class="fa fa-unlock-alt"></i></fieldset>
                <label><input type="checkbox" />Remember me</label><button type="button" class="blue" ng-click="adminLogin();">LOG IN</button>
            </form>
        </div>
        <span>Copyright © 2015 Odia Doctor</span>
    </div>
</div><!-- Log in Sec -->   
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/adminlogincontroller.js" type="text/javascript"></script>
</body>

</html>

adminlogincontroller.js:

var app = angular.module('adminModule',[]);
app.controller('admincontroller',['$scope','$http',function($scope,$http){   
      console.log('hello controller');
       $scope.lStatus=false; 

    }])

I need here when page will be load this controller function will called.But nothing is happening like this.Please help me to resolve this issue.

sebastienbarbier · Accepted Answer · 2015-07-25 16:35:09Z

1

It looks like you define your ng-app on <head> instead of <html>.

<head ng-app="adminModule">

So it result that your controller is not in the scope of angular :)

</head>
<body style="background-image: url('images/resource/login-bg.jpg')" ng-controller="admincontroller">

You should so declare it on <html>

<html ng-app="adminModule">
    <head>
    ...
    </head>
    <body ng-controller="...">

    </body>
</html>

answered Jul 25, 2015 at 16:35

sebastienbarbier

6,8424 gold badges34 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sebastienbarbier Over a year ago

Always a pleasure to help ;)

Collectives™ on Stack Overflow

Unable to execute controller function using angular.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related