Angular js not behaving properly with html

Question

This is my small basic angular js code :-

var app=angular.module("myApp",[]);
app.controller("MyController",['$scope',function($scope){
$scope.name="Asim";
$scope.f1=function(){   
console.log("i am clicked");
$scope.vr="lol";
}
console.log("angular working");
}]);

And this is my index.html code :-

<html ng-app="myApp">
<head>
<script type="text/javascript" src="/angular.min.js"></script>
<script src="/app.js"></script>

<title> Index </title>
</head>  
<body ng-controller="MyController">    
{{vr}}
{{name}}

<button ng-click="f1()">Click me</button>

 </body>
</html>

When I click the button it shows in console "I am clicked" and "angular is working" does print but the {{name}} and {{vr}} doesn't print. Any possible reason??

Plus i am using nodejs and angular code is in "public" folder i.e static folder and my index.html resides in "views" formed when a project with express-generator is created. I got a hint, maybe "name" and "vr" are loaded after the index.html page is rendered, so they don't print and everything else works, ANYWAY TO FIX SUCH THING?

My angular code resides in "public" folder. And the index.html is in "views" folder. Folder pattern is according to express-generator scene. — Asim
– Asim, Commented Jul 22, 2017 at 19:05
what does it print in places for {{vr}} and even {{name}} should always print, does not depend on click — Rahul Beniwal
– Rahul Beniwal, Commented Jul 22, 2017 at 19:06
It prints nothing. There is only a button "Click Me" on the screen. I tried Opera and Chrome same case. — Asim
– Asim, Commented Jul 22, 2017 at 19:09

Vivz · Accepted Answer · 2017-07-22 19:33:45Z

1

You can use ng-bind. Only your name will render because the other variable is getting initialised inside the ng-click. You can simply use one way binding.

<span ng-bind="name"></span>

answered Jul 22, 2017 at 19:33

Vivz

6,6282 gold badges19 silver badges34 bronze badges

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

1 Comment

Vivz Over a year ago

There might be any css problem on your view. Maybe that is why the data is not appearing in the view port of the screen when you are using vanilla {{name}} inside body. Using span will make sure that your data is tied to a valid html

Jarek Kulikowski · Accepted Answer · 2017-07-22 19:12:55Z

0

You code seems to be working, I think, am I missing something?

<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>

var app=angular.module("myApp",[]);
app.controller("MyController",['$scope',function($scope){
    $scope.name="Asim";
    $scope.f1=function(){
        console.log("i am clicked");
        $scope.vr="lol";
    }
    console.log("angular working");
}]);
</script>

<title> Index </title>
</head>
<body ng-controller="MyController">
    {{vr}}
    {{name}}
    <button ng-click="f1()">Click me</button>
 </body>
</html>

answered Jul 22, 2017 at 19:12

Jarek Kulikowski

1,3898 silver badges9 bronze badges

3 Comments

Asim Over a year ago

No, see my app.js and index.html are in different files.

Jarek Kulikowski Over a year ago

Then I guess you app.js file is not loaded in html tag maybe try <script src="./public/app.js"></script> or <script src="./app.js"></script>

Asim Over a year ago

I think script is loading thats why I see "angular working" in console.

Collectives™ on Stack Overflow

Angular js not behaving properly with html

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related