can't access ng-init value

Question

I am new to Angular.js . Trying to print total number of the rows but can't access the ng-init variable (ct). last span tag is not showing the value of {{ct}}. Did I miss anything ?

<div id="test-area" ng-controller="mycontroller" >
        <input type="number" step="1" max="5" min="1" ng-model="count" style="width:50px;"/>

        <input type="number" step="1" max="4" min="0" ng-model="indexFrom" style="width:50px;"/>
       <table class="tab1">
           <thead>
            <th>Name</th>  <th>Id</th>  <th>Address</th>  <th>Number</th> 
               <th>Date</th>
           </thead>
        <tr ng-repeat="user in users | limitTo:count:indexFrom " ng-init="parent=user;$parent.ct=$index">
        <td>{{user.name | uppercase}}</td>   
        <td> {{user.id | number }}</td> 
        <td>{{user.address |lowercase}}</td> 
            <td ng-bind="parent.marks[0].it |currency:'$'">
            </td>
            <td class="ng-bind:user.bs | date:'dd/MM/yyyy'">

            </td>
        </tr>
        </table>
           <br/>
        <span class="gray">Total Row Number : {{ct}} | From {{indexFrom}} to {{indexFrom+count}} </span>
        <br/>



    </div>

js :

(function(){

    var app=angular.module("Myapp",[]);
    var mycontrol=function($scope){
        $scope.users=users;
        $scope.increment=increment;
        $scope.change=change;
        $scope.count=3;
        $scope.indexFrom=0;
    }
    //marks increment
    var increment=function(marks){
        marks.it+=1;
    }
    //id increment
    var change=function(num){
       num.id=Number(num.id)+1;
    }
    var users=[{
            name:"Nihar", 
            id:"123",
            address:"New Town",
            bs:new Date("April 30 1993"),
            marks:[{it:90},{it:88},{it:97}]
        },{
            name:"Nilanjan",
            id:"194",
            address:"Baguiati",
            bs:new Date("July 20 1993"),
            marks:[{it:94},{it:65},{it:82}]
        },{
            name:"Raktim",
            id:"129",
            address:"Tegharia",
            bs:new Date("September 17 1993"),
            marks:[{it:97},{it:81},{it:79}]
        },{
            name:"Kaushik",
            id:"126",
            address:"Howrah",
            bs:new Date("October 10 1992"),
            marks:[{it:81},{it:89},{it:78}]
        },{
            name:"Abhishek",
            id:"287",
            address:"Dum Dum",
            bs:new Date("December 25 1994"),
            marks:[{it:91},{it:68},{it:87}]
        }];
    app.controller("mycontroller",mycontrol)



    }());

To further expand upon Danny's answer: we have 0 clue what is wrong, because yo haven't shown us the most important aspect of the code. You have a javascript question, yet you show us no javascript. — Chris Stanley, Aug 12 '16 at 17:07
This answer should work for you http://stackoverflow.com/a/19517533/373655 — rob, Aug 12 '16 at 17:11
Nihar , are you able to see users table ? if i am not wrong, you are able to see users table but not the row total table right?? — Naga Sai A, Aug 12 '16 at 17:28

Danny Buonocore · Accepted Answer · 2016-08-12T18:48:44.700

Try changing

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

to

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

Here's a working fiddle.

EDIT:
Naga is correct, it would work with MyApp as well. The reason why Myapp does not work is because of the way Angular handles the directive names. On the Javascript side, Angular converts your names to camel case, which basically means the first letter is lowercase, and the next letter of each "word" in the variable is uppercase. When the values are represented in HTML, they follow the HTML standard of being dash delimited, where each letter is lowercase, and words are separated by - characters. You can also use colons (:) or underscores (_), but hyphens are the most common.

When you write Myapp or myapp in your Javascript, Angular normalizes that to myapp in the HTML. But when you have MyApp or myApp, it becomes my-app in the HTML.

You can use whichever capitalization you like, so long as the HTML and Javascript match.

it works with anycase , it is not the issue with the myApp case - http://codepen.io/nagasai/pen/OXdVzj check this once — Naga Sai A, Aug 12 '16 at 17:24

can't access ng-init value

1 Answers1