In this tutorial, We will discuss $scope in Angular Js. $scope is javascript object that is used to build communication between view and controller. $scope is available to both view and controller. $scope is controller specific which means we can not access $scope object outside the controller.

After completing this tutorial you will be able to understand:

  • $scope in Angular Js.

$scope in Angular Js:

$scope is javascript object that is used to build communication between view and controller. $scope is available to both view and controller. $scope is controller specific which means we can not access $scope object outside the Controller.

$scope is an angular js built-in object which contains application data and methods. You can define modal data using the $scope and access them from the view(HTML DOM element).

$scope

$scope is the first parameter while defining a Controller.

Let’s see how to define a $scope in angular

var myApp = angular.module("myApp", []);


  

    myApp.controller("myController", function($scope) {

      $scope.Greeting = "Hello World..!!";

   

   });

We can display $scope data using expression, ng-bind or ng-model directive of angular js. Following example will show you how to $scope object works in Angular Js.

<!DOCTYPE html>

<html >

<head>

    <title>AngualrJS $scope Example</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body ng-app="myApp">

    <div ng-controller="myController">

        Message: <br />

        {{Greeting}}<br />

        <span ng-bind="Greeting"></span> <br />

        <input type="text" ng-model="Greeting" />

    </div>

    <script>

        var myApp = angular.module('myApp', []);




        myApp.controller('myController', function ($scope) {

            $scope.Greeting = "Hello World!";       

        });

    </script>

</body>

</html>

Click here to see the demo.

Scope Inheritance:

As we discussed scope are Controller specific. In case of the nested controller, the child controller can access the scope of its parent controller.  That means child controller can access properties of parent controller but parent controller cannot access the properties defined in child controller scope.

Let’s see an example of a nested controller.

<html>

   <head>

      <title>Angular JS Nested Controller</title>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

   </head>

  

   <body>

      <h2>Angular JS Nested Controller</h2>

     

      <div ng-app = "myApp" ng-controller = "parentController">

         <p>{{message}} <br/> {{level}} </p>

        

         <div ng-controller = "childController">

            <p>{{message}} <br/> {{level}} </p>

         </div>  

</div>

    <script>

         var myApp = angular.module("myApp", []);

        

        myApp.controller("parentController", function($scope) {

            $scope.message = "In Parent Controller";

            $scope.level = "Parent";

         });

        

         myApp.controller("childController", function($scope) {

            $scope.message = "In Child Controller";

         

         });

      </script>     

   </body>

</html>

Click here to see the demo.

View more :

Conclusion:

I hope you understand this tutorial about $scope in Angular Js. I would appreciate your Feedback, Comments, and Suggestions.

Thank You.

58 Comments

  • Hi there! Quick question that’s entirely off topic. Do you know how to make your site mobile friendly? My site looks weird when viewing from my iphone 4. I’m trying to find a template or plugin that might be able to fix this problem. If you have any suggestions, please share. Thank you!|

  • Right here is the perfect blog for anyone who wishes to understand this topic. You understand a whole lot its almost hard to argue with you (not that I personally would want to…HaHa). You definitely put a brand new spin on a topic which has been written about for years. Excellent stuff, just great!|

  • Today, I went to the beach with my children. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is entirely off topic but I had to tell someone!|

  • Having read this I thought it was rather informative. I appreciate you finding the time and energy to put this article together. I once again find myself personally spending way too much time both reading and leaving comments. But so what, it was still worthwhile!|

  • Thank you for every other informative site. The place else may I am getting that type of info written in such an ideal way? I have a undertaking that I’m just now working on, and I’ve been at the look out for such information.|

  • Amazing! This blog looks just like my old one! It’s on a entirely different subject but it has pretty much the same page layout and design. Superb choice of colors!|

  • What’s up to every one, because I am genuinely eager of reading this weblog’s post to be updated daily. It carries nice stuff.|

  • Spot on with this write-up, I honestly believe this web site needs far more attention. Good post. I learn something totally new and challenging on websites I stumbleupon every day. It’s always helpful to read articles from other writers and use a little something from their websites. I’ll probably be back again to see more, thanks for the advice!

  • Hello, its fastidious piece of writing concerning media print, we all be familiar with media is a impressive source of data.|

  • Great site you have got here.. It’s difficult to find high quality writing like yours these days. I truly appreciate people like you! Take care!!

  • I do agree with all the ideas you have offered on your post. They are really convincing and will definitely work. Nonetheless, the posts are too brief for novices. May you please extend them a little from next time? Thanks for the post.|

  • Excellent weblog here! Additionally your site rather a lot up fast! What web host are you using? Can I am getting your associate link on your host? I desire my web site loaded up as quickly as yours lol|

  • Thanks for some other informative blog. The place else could I get that kind of info written in such a perfect approach? I’ve a undertaking that I am simply now running on, and I have been at the glance out for such info.|

  • An impressive share! I have just forwarded this onto a coworker who was doing a little homework on this. And he actually bought me dinner because I stumbled upon it for him… lol. So allow me to reword this…. Thank YOU for the meal!! But yeah, thanx for spending the time to talk about this subject here on your site.|

  • I’ve been surfing online more than 2 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. Personally, if all website owners and bloggers made good content as you did, the net will be a lot more useful than ever before.|

  • What’s up i am kavin, its my first time to commenting anywhere, when i read this piece of writing i thought i could also make comment due to this sensible paragraph.|

  • Great site you’ve got here.. It’s difficult to find high-quality writing like yours these days. I seriously appreciate individuals like you! Take care!!|

  • Very shortly this web page will be famous amid all blog people, due to it’s pleasant articles or reviews|

  • Hello there! Quick question that’s totally off topic. Do you know how to make your site mobile friendly? My site looks weird when browsing from my iphone4. I’m trying to find a template or plugin that might be able to fix this issue. If you have any recommendations, please share. Cheers!|

  • Howdy! I’m at work browsing your blog from my new iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Keep up the excellent work!|

  • It’s truly very complex in this busy life to listen news on TV, therefore I only use web for that reason, and take the latest news.|

  • Very nice post. I just stumbled upon your weblog and wanted to say that I have really enjoyed surfing around your blog posts. After all I will be subscribing to your feed and I hope you write again very soon!|

  • I have been browsing online more than 4 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. Personally, if all website owners and bloggers made good content as you did, the internet will be much more useful than ever before.|

  • What’s up everyone, it’s my first visit at this site, and piece of writing is actually fruitful designed for me, keep up posting these types of posts.|

  • I’m extremely inspired with your writing talents as well as with the structure in your blog. Is that this a paid subject matter or did you modify it yourself? Anyway keep up the nice high quality writing, it’s uncommon to look a great blog like this one today..|

  • At this time it appears like Movable Type is the top blogging platform out there right now. (from what I’ve read) Is that what you are using on your blog?|

  • I like the valuable info you provide in your articles. I’ll bookmark your blog and check again here regularly. I’m quite certain I’ll learn a lot of new stuff right here! Best of luck for the next!|

  • I was more than happy to find this internet-site.I needed to thanks for your time for this wonderful learn!! I positively having fun with every little bit of it and I’ve you bookmarked to take a look at new stuff you blog post.

  • Whats up very cool site!! Guy .. Excellent .. Wonderful .. I’ll bookmark your web site and take the feeds also? I am happy to search out so many useful info here within the put up, we want develop more techniques in this regard, thank you for sharing. . . . . .|

  • Hello there, just became aware of your blog through Google, and found that it is really informative. I am gonna watch out for brussels. I’ll be grateful if you continue this in future. Many people will be benefited from your writing. Cheers!|

  • Hi there, just became alert to your blog through Google, and found that it’s really informative. I am gonna watch out for brussels. I will appreciate if you continue this in future. A lot of people will be benefited from your writing. Cheers!|

  • 496358 69824Hello, Neat post. Theres an problem together with your site in web explorer, may check this? IE nonetheless is the marketplace leader and a huge component to folks will omit your wonderful writing because of this issue. 763858