To get Value of $scope variable in HTML

Question

I am new to Angular. I got problem, like I am creating a variable in Controller JS but can't fetch in HTML part.

<html ng-app='Demo'>    
<body>
            <h2>Select Your Symbol</h2><br><br>
            <div class='selection' ng-controller='MasterController' ng-init="selectedSymbol = ''" >
                <div class=" col-md-3"></div>
                <div  ng-repeat="symbol in symbols" ng-model="selectedSymbol">
                    <a class='col-xs-1 box' id={{symbol.definition}} ng-click="remove(symbol); user= symbol.definition" ><big class='fixed'>{{symbol.definition}}</big></a>
                </div>
            </div><br>
            {{selectedSymbol}}
        </body>
</html>

JS part

(function( ng) {

    "use strict";

    // Define our AngularJS application module.
    window.demo = ng.module( "Demo", [] );

})( angular );
(function( ng, app ) {

    "use strict";

    app.controller(
        "MasterController",
        function( $scope ) {


            // -- Define Controller Methods. ---------------- //

                $scope.symbols = [
            {
                definition: 'X',
            },
            {
                definition: 'O',
            }
        ];
        $scope.remove = function(symbol) {
         if(symbol.definition == 'X' && this.symbols.length >1)
         {
            this.symbols.splice(1);
            $scope.selectedSymbol = 'X';
            alert($scope.selectedSymbol);
         }
         else if (symbol.definition == 'O' && this.symbols.length >1)
         {
            this.symbols.splice(0,1);
             $scope.selectedSymbol = 'O';
             alert($scope.selectedSymbol);
         } 

        };
        }
    );

})( angular, demo );

Now I can see $scope.selectedSymbol in Alert but can't have in html. I want to use in way of Angular.

Please Help Thanks

can you provide the fiddle >

ngLover
– ngLover

2015-07-18 12:09:29 +00:00
Commented Jul 18, 2015 at 12:09 — ngLover
– ngLover, Commented Jul 18, 2015 at 12:09
It gave error. I am trying to add it.

krishna Ram
– krishna Ram

2015-07-18 12:11:07 +00:00
Commented Jul 18, 2015 at 12:11 — krishna Ram
– krishna Ram, Commented Jul 18, 2015 at 12:11

K K · Accepted Answer · 2015-07-18 12:12:13Z

3

You can only access the scope variable inside the controller container i.e. a div in your case. Outside that div, the scope variable is undefined. Place that tag inside the div, you will be able to access it.

Example:

<div class='selection' ng-controller='MasterController' ng-init="selectedSymbol = ''">
    <div class=" col-md-3"></div>
    <div ng-repeat="symbol in symbols" ng-model="selectedSymbol"> <a class='col-xs-1 box' id={{symbol.definition}} ng-click="remove(symbol); user= symbol.definition"><big class='fixed'>{{symbol.definition}}</big></a>

    </div>{{selectedSymbol}}<!--This is well inside the scope of controller and hence you can access it in the html-->
</div>

answered Jul 18, 2015 at 12:12

K K

18.2k4 gold badges33 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

To get Value of $scope variable in HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related