Angular limit to first ng-if TRUE item in ng-repeat - angularjs

Question

Hej, how do I show only the first number that evaluates to true inside ng-repeat?
In my directive (or controller) I have:
ctrl.things = [1,2,3,4,5,6];
and in my html:
<div ng-repeat='thing in ctrl.things' >
<span ng-if="thing>3" ng-show="$first">{{thing}}</span>
</div>
How do I display only 4 as a result?
Please bear in mind that this example is simplified. There is actually an ng-repeat inside ng-repeat and because of that (and other things) there are not many things I co do inside the directive (controller). Many thanks for any solution.

Answer 1

Declare a method in the scope
$scope.getData=function(obj){
return obj > 3;
}
Then add this as filter in div
<div ng-repeat='thing in things | filter : getData' ng-if="$first">
<span >{{thing}}</span>
</div>
JSFIDDLE
If wanna to use this
Try like this
Declare a method in the scope
vm.getData=function(obj){
return obj > 3;
}
Then add this as filter in div
<div ng-repeat='thing in vm.things | filter : vm.getData' ng-if="$first">
<span >{{thing}}</span>
</div>
JSFIDDLE

Answer 2

You should have to create a filter or inline it like this:
<div ng-repeat='thing in ctrl.things' ng-if="thing > 3">
<span ng-if="$first">{{thing}}</span>
</div>
That should work

Answer 3

I think you are looking for this:
//controller
$scope.ctrl={};
$scope.ctrl.things=[{1:false},{2:false},{3:false},{4:true},{5:true}];
$scope.check=function(value){
$scope.count = value === true?($scope.count+1):$scope.count;
return $scope.count ===1 ;
}
//end of controller
HTML
<div ng-repeat='(key,value) in ctrl.things' >
<span ng-if="check(value)">{{key}}</span>
</div>
To show first element if you want to show last item you can put ng-if="$last"