ng-src display:none issue, src works

Question

I have an issue in that when I scroll up my image is appended with display: none at one point (when my pageYOffest is 46) then removed, causing a flashing effect. When I replace the ng-src with src it works fine, however I need ng-src as I will be using a variable.

The point of the directive is for the image to fade as the user scrolls.

I am also using stellar.js initialised at the bottom of my html, so the image scrolls at half the speed.

I have the following html:

<div id="imageHolder" data-stellar-ratio="0.5" style="opacity: {{scroll}}" scroll-position="scroll">
    <img ng-src="http://www.carjet.com/files/Cornwall,%20England,%20UK%20-%20Porthtowan%20beach%20on%20a%20sunny%20day%20-%20Newquay%20car%20hire.jpg" />        
  </div>

....

<script>
$(function() {
        $.stellar({
          horizontalScrolling: true,
          verticalScrolling: true,
          hideDistantElements: 1
        });
      });
</script>

I am using this directive:

.directive('scrollPosition', function($window) {
  return {
    scope: {
      scroll: '=scrollPosition'
    },
    link: function(scope, element, attrs) {
      var windowEl = angular.element($window);
      var handler = function() {
        scope.scroll = 1 - (windowEl[0].pageYOffset * 0.0066);
      }
      windowEl.on('scroll', scope.$apply.bind(scope, handler));
      handler();
    }
  };
});

Any idea what could be happening?