CODEWITHSUNDEEP
htmlangularjs
Asim
Asim

Reputation: 1480

Angularjs not binding data and html not printing scope variables

That's my complete code angular is not printing vars in the body tag of the html pice, console.log() everywhere is working. ng-click at submit button is also working.

<html ng-app="fb">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap      /3.3.7/css/bootstrap.min.css"
 integrity="sha384-   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5  /angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-cookie/4.1.0/angular-cookie.js"></script>

<script>
var app=angular.module('fb', []);

app.controller('home',function($scope){
    var hi;
    $scope.hi=5;
    //$rootScope.hola=9;
    console.log($scope.hi);
    //console.log($rootScope.hola);

    $scope.submitSignup=function()
    {
    var hi;
    $scope.hi=5;
    //$rootScope.hola=9;
    console.log($scope.hi);
    //console.log($rootScope.hola);
    console.log($scope.username);
        alert('button pressed');
    };
});

</script>
<head>
<title>Index</title
</head>

<body>
<div ng-controller='home'>
<input type="text" placeholder="Username" ng-model="username">
<br>
<input type="password" placeholder="Password" ng-model="password">
<br>

<button type="button" ng-click="submitSignup()">SignUp</button>

<br>

<p> {{username}} </p>


<p> {{hi}} </p>


{{hola}}


</div>

<p> index </p>
</body>
</html>

Scratching my head for hours and hours at this, any help will be appreciated.

Upvotes: 2

Views: 986

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222522

add ng-app in your template with ng-app="fb"

DEMO

 
<html ng-app="fb">
<head>
<title>Index</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script>
var app=angular.module('fb', []);
app.controller('home',function($scope){
    var hi;
    $scope.hi=5;
    //$rootScope.hola=9;
    console.log($scope.hi);
    //console.log($rootScope.hola);

    $scope.submitSignup=function()
    {
    var hi;
    $scope.hi=5;
    //$rootScope.hola=9;
    console.log($scope.hi);
    //console.log($rootScope.hola);
    console.log($scope.username);
        alert('button pressed');
    };
});
</script>
<body>
<div ng-controller='home'>
<input type="text" placeholder="Username" ng-model="username">
<br>
<input type="password" placeholder="Password" ng-model="password">
<br>
<button type="button" ng-click="submitSignup()">SignUp</button>
<br>
<p> {{username}} </p>
<p> {{hi}} </p>
{{hola}}
</div>
<p> index </p>
</body>
</html>

Upvotes: 2

Vivz
Vivz

Reputation: 6620

You forgot to initiate your app with ng-app="fb"

 <body ng-app="fb">
    <div ng-controller="home">
        <input type="text" placeholder="Username" ng-model="username">
        <br>
        <input type="password" placeholder="Password" ng-model="password">
        <br>
        <button type="button" ng-click="submitSignup()">SignUp</button>

        <p> {{username}} </p>

        <p> {{hi}} </p>

        {{hola}}

    </div>
    <p> index </p>
</body>

</html>

Upvotes: 1

Related Questions