Implements multi custom styles

[zuhrasofyan]

Is there any way to set several different custom style that I can call depends on the available data?
My current implementation that I do is iterating the insertion of different custom_style for each points before displaying it in my html file such as:
in controller:

vm.atm_style = {
              image: {
                  icon: {
                      anchor: [0.5, 1],
                      anchorXUnits: 'fraction',
                      anchorYUnits: 'fraction',
                      src: 'atm.png'
                  }
              }
          };
    $http.get('url_to_atm_points.json').then(function(d){
       var arr = []; var fill = {};
        angular.forEach(d.data, function (obj){
          fill = {
            name: obj.name,
            lat: parseFloat(obj.lat, 10),
            lon: parseFloat(obj.lon, 10),
            label: {
              message: obj.name,
              show: false,
              showOnMouseClick: true
            },
           style: vm.atm_style
          };
          arr.push(fill);
        });
        vm.atm = arr;
    });

and in html:
<ol-marker ng-repeat="markerATM in vm.atm" ol-marker-properties="markerATM"></ol-marker>

I found my approach is very expensive if I have hundred of points with couple of custom styles because I have to iterate pushing the style one by one.

So, if someone know a solution to use something like ol-style ( In which if I see in the example is set to the map config and only working for one custom style)
<ol-marker ng-repeat="markerATM in ::vm.atm" ol-marker-properties="::markerATM" ol-style="vm.atm_style"></ol-marker> ,
that would be awesome.