AngularJS - Lazy load HTML views in single page layout

Plunkr: http://plnkr.co/edit/kNOrPGXn6NausmH2EoZi?p=preview

'use strict';

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.sections = ['section-1','section-2','section-3']; //html files to load (top.html, etc)
  $scope.loadedSections = [$scope.sections[0]]; //loaded html files
});

app.directive('scrollLoad', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var to = scope[attrs.scrollLoadTo]; //$scope.loadedSections
      var from = scope[attrs.scrollLoadFrom]; //$scope.sections

      $window = angular.element(window);
      $window.bind('scroll', function(event) {
        var scrollPos = document.body.scrollTop + document.documentElement.clientHeight;
        var elemBottom = element[0].offsetTop + element.height();
        if (scrollPos >= elemBottom) { //scrolled to bottom of scrollLoad element
          $window.unbind(event); //this listener is no longer needed.
          if (to.length < from.length) { //if there are still elements to load
            //use $apply because we're in the window event context
            scope.$apply(to.push(from[to.length])); //add next section
          }
        }
      });
    }
  };
});

Trying to create a single-page site that has about 20 sections, each section has a lot of images and text. When you scroll down the page, each section will lazy load into the page to reduce page weight. When you initially load the page, it should load in as many as will fit on the screen.

I had it working for a short while, but it was blinking the first section in and out repeatedly. How can I get this to work?

Also trying to integrate $location to change the page URL, as an additional request.