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)



    }());

Answer 1

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.