Set directive attribute according to viewport width

Question

I am using angular slick for a rotating carousel. It has attributes for the number of slide to show and scroll:

<slick slides-to-show="x" slides-to-scroll="y">

I would like these attributes to have different values depending on the viewport width but I'm not sure what the best approach is. Can this be set inside the controller for the template which the directive is in?

e.g.

.controller('someController', function($scope) {
    $scope.x = foo;
    $scope.y = bar;
}

<div ng-controller="someController">
    <slick slides-to-show="x" slides-to-scroll="y">
</div>

doesn't work but is there another way?

Thanks,

Answer 1

Okay turns the reason the above example wasn't working because the directive attributes were bound with @ and x and y needed to be interpolated as:

Learned from this question: What is the difference between '@' and '=' in directive scope in AngularJS?