Develop Reference

$parent.$index always returns 0

I have an ng-repeat inside another one and I am trying to find out the parents index.
Because it is being ordered after the fact, I can't do the typical
ng-repeat="(step_index, step) in flow"
Does anyone know why this would be happening?
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parent.$index }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>

You can use ng-init="$parentIndex = $index" on your parent <li>, then call $parentIndex in the child ng-repeat
<ul>
<li ng-repeat="step in flow | orderBy:'+step_number'" ng-init="$parentIndex = $index">
<div class="step_container">
<div class="step_content">
<div ng-repeat="task in step.tasks">
<div class="task_container">
<div class="task_content">
{{ $parentIndex }} - {{ $index }}
</div>
</div>
</div>
</div>
</div>
</li>
</ul>

Move to next item in ng-repeat item in items

I'm using a carousel that I should render 2 items in each ng-repeat cycle like this:
<div owl-carousel-item="" ng-repeat="item in (filteredItems = (items | filter:query))" class="item">
<a ng-href="/#/{{Page.Culture+'/live/'+item.id}}">
<div class="tv-show-box one-row">
<div class="tv-show-box-cover">
<ul>
<li>{{::item.name}}</li>
</ul>
</div>
<img ng-src="{{::item.image_name}}" width="220" height="148" alt="" class="img-responsive"/>
</div>
</a>
<--PART2: Item must go to next Item for this part -->
<a ng-href="/#/{{Page.Culture+'/live/'+item.id}}">
<div class="tv-show-box one-row">
<div class="tv-show-box-cover">
<ul>
<li>{{::filteredItems[$index + 1].name}}</li>
</ul>
</div>
<img ng-src="{{::filteredItems[$index + 1].image_name}}" width="220" height="148" alt="" class="img-responsive"/>
</div>
</a>
</div>
I means in Part2 define in code, I need to move to next item before ng-repeat is called again, I'm using $index+1 but it's not good for me,
I want to it to permanently move to next item not just accessing to it
Does it have something like item.Next() or something?

You could for example try something like this:
<tr ng-repeat="item in items" ng-if="$index % 2 == 0">
<td class="text-center">{{item.id}}</td>
<td class="text-center">{{items[$index + 1].id}}</td>
</tr>
it may be enough to do the trick for you :)
Edit:
For 3 items you could do:
<tr ng-repeat="item in items" ng-if="$index % 3 == 0">
<td class="text-center">{{item.id}}</td>
<td class="text-center">{{items[$index + 1].id}}</td>
<td class="text-center">{{items[$index + 2].id}}</td>
</tr>

AngularJS nested ng-repeat

I have object which contains question and list of choices. I'm display this object on the page using nested ng-repeats. When I'm trying to change 'question' everything changes just fine, but when I'm trying to change 'choice' nothing happens. Where is the problem?
My page:
<div class="panel">
<div class="row">
<div class="large-12 columns">
<h3>{{ title }}</h3>
<ol>
<li ng-repeat="q in quiz">
<input type="text" ng-model="q.question">
<ul class="remove-li-dots">
<li ng-model="choice" ng-repeat="choice in q.choices">
<input type="text" ng-model="choice" name="answer{{ q.id }}" >
</li>
</ul>
</br>
</li>
</ol>
<a class="button" ng-click="submitQuiz()">Submit</a><br>
{{ quiz }}
</div>
</div>
Screenshot of the page:
https://www.dropbox.com/s/i52fwq1os0cvcr9/repeat.png?dl=0

Problem is that choice is a string, so when you are changing it in child scope it is changing only in child scope.
To fix this - reference it by index in array ng-repeat="(choiceIndex,choice) in q.choices,ng-model="q.choices[choiceIndex]".
Also to prevent inputs from loosing focus when changing items - you will need to add track by $index in ng-repeat directive.
<ol>
<li ng-repeat="q in quiz">
<input type="text" ng-model="q.question">
<ul class="remove-li-dots">
<li ng-model="choice" ng-repeat="(choiceIndex,choice) in q.choices track by choiceIndex">
<input type="text" ng-model="q.choices[choiceIndex]" name="answer{{ q.id }}">
</li>
</ul>
</li>
</ol>
working example:
http://plnkr.co/edit/GJacjkzfT4FpfC6szsNk?p=preview
For better understanding how angular scopes works, I recommend reading this: https://github.com/angular/angular.js/wiki/Understanding-Scopes

How to remove <hr/> for last li in angular ng-repeat

Here is my angular View
<li class= "riskmanagementlink" ng-repeat="link in links">
<h3> {{link.Description}} </h3>
<a> {{link.Title}} </a>
<hr/>
</li>
I would like to remove the hr tag for the last list item. Can anybody help me do this please?

The ng-repeat directive comes with some extra properties like $last, which indicates that you're on the last item of your collection.
<li class="riskmanagementlink" ng-repeat="link in links">
<h3> {{ link.Description }} </h3>
<a> {{ link.Title }} </a>
<hr ng-if="!$last" />
</li>
More info in the docs.

How can I increment the class names using ng-repeat?

I set up an ng-repeat to rollout a bunch of elements from a JSON file however I would like each element to have a incremental class name .item-1, .item-2, .item-3.
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ item.length }}"></span>
</div>
</div>
I would like to add the number to class="item-{{ item.length}}" but I can't seem to get this working.

I don't know what is the benefit of generating dynamic class names like this. A class should mean a class of similar objects.
It's still possible with $index:
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ $index }}"></span>
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngRepeat

As documented on https://docs.angularjs.org/api/ng/directive/ngRepeat just use $index
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ $index }}"></span>
</div>
</div>