How to set dynamic limit in ng-repeat angular js - arrays

Question

How to set dynamic limit in ng-repeat ? I want to set limit if window width is less than 750 px than set limit to 1.
Here is my controller function:
$scope.$watch('window.innerWidth', function() {
$scope.wsizewindow = window.innerWidth;
if($scope.wsizewindow < 750) {
$scope.limit = 0;
} else {
}
console.log($scope.wsizewindow);
});
Here is my html:
<flex-slider slider-id=""
flex-slide="responsibilities in roles.responsibilities track by $index | limitTo: limit" animation="slide"
animation-loop="false" item-width="350" item-margin="1" keyboard="false"
as-nav-for="#slider" slideshow="false" control-nav="false">
<li class="col-sm-3" ng-if="responsibilities.responsibilityName!=''">
<div class="new-box" ng-if="$index!=roles.responsibilities.length-1">
<div class="panel-heading1">Responsibility</div>
<div class="col-xs-12 col-sm-12">
<div class="strike" >
<span >{{responsibilities.responsibilityName}}</span>
</div>
</div>
<div class="col-xs-12 col-sm-12 box">
<div class="form-group list" mb-scrollbar="scrollbar('vertical', true)">
<div class="panel panel-default" style="cursor: pointer;" ng-click="invokeReviewProcess(departments,roles,responsibilities,processes,isCompAdmin);" ng-repeat="processes in responsibilities.processes">
<span class="id">{{processes.name}}</span>
</div>
</div>
<div align="center" id="addProcessLink" ng-if="isAdmin === true && isGraph">
<a class="primary-link" ng-click="addProcess(departments.id,roles.id,responsibilities.id)" href="#"> Add a Process</a>
</div>
</div>
</div>
</li>
</flex-slider>
I want to set limit here:
responsibilities in roles.responsibilities track by $index | limitTo: limit.
Give me some suggestions. I am new to AngularJs. thanks.

Answer 1

Use a function defined in your controller:
responsibilities in roles.responsibilities track by $index | limitTo: (setLimit())
In your controller:
$scope.setLimit = function() {
//check if window width less than 750, if yes, return 1 else some other limit
}