1

I was trying to learn the most basic implementation of controllers and modules in AngularJS.

Here is the code I have tried:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>
    This is the most <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_controller'>basic angularJS controller</a> implementation
    </h1>
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{ firstName + " " + lastName }}

</div>

The output is not getting updated:

output

Improve this question

2 Answers 2

Reset to default
2

You need to select No wrap - in <body> in the dropdown menu in Frameworks and extensions tab, check the pic:

enter image description here

Updated JSFiddle

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

Comments

1

Just a small issue,

Angularjs script did not get referenced. Just change it to wrap it in head,

Here is the working JsFiddle

Improve this answer

5 Comments

Thanks @Sajeetharan - is it possible to load boostrap and angularJS simultaneously in jsFiddle? If yes, how?
Thanks @Sajeetharan. But how from the sidemenu?
On the side menu you will find a division named External Resources , there you can paste the Bootstrap url and use it
Thanks @Sajeetharan again!
Let us continue this discussion in chat.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.