Reset the scrollpoint in response to a broadcasted event

demo/index.html

@@ -11,6 +11,11 @@
         <script src="../dist/scrollpoint.js"></script>
         <script>
             var app = angular.module('demo', ['ui.scrollpoint']);
+            app.controller( 'scrollpointTest', function($scope, $rootScope){
+                $scope.triggerReset = function(){
+                    $rootScope.$broadcast('scrollpointShouldReset');
+                };
+            });
         </script>
         <style>
             body {min-height: 1500px;}
@@ -56,6 +61,50 @@ <h3>Why?</h3>
                     </p>
                 </div>
             </div>
+            <div class="row">
+                <div class="col-md-6" ng-controller="scrollpointTest">
+                    <h3>A scrollpoint with a target set on a parent scrollable div</h3>
+                    <div class="well" style="height:200px;overflow:auto; position:relative;"  ui-scrollpoint-target>
+                        <div class="well" style="height:100px;" ng-show="showSpacer">
+                            This is a removable spacer
+                        </div>
+                        <div id="scrollExample2" class="well" ui-scrollpoint="+100">
+                            <p ui-scrollpoint="+10px">They see me scrollin...</p>
+                            <p ui-scrollpoint>They see me scrollin...</p>
+                            <p ui-scrollpoint>They see me scrollin...</p>
+                            <p ui-scrollpoint>They see me scrollin...</p>
+                            <p ui-scrollpoint>They see me scrollin...</p>
+                            <p ui-scrollpoint="-100">offest: -100</p>
+                            <p ui-scrollpoint="+100">offest: +100</p>
+                            Try scrolling past this line and see effect on above lines...
+                        </div>
+                        <div style="height:400px;">
+
+                        </div>
+                    </div>
+                    <div class="checkbox">
+                        <label>
+                            <input type="checkbox" ng-model="showSpacer"> Show Spacer
+                        </label>
+                    </div>
+                    <button class='btn btn-primary' type="button" ng-click="triggerReset()">Reset scrollpoints</button>
+                </div>
+                <div class="col-md-6">
+                    <h3>Resetting</h3>
+
+                    <p>
+                        If the position of the scrollpoint is moved on the page by an event such as the introduction of another
+                        element, it may be necessary to reset the scrollpoint by broadcasting the <code>scrollpointShouldReset</code> event
+                        from $rootScope.
+                    </p>
+
+                    <p class="alert alert-info">
+                        Try scrolling down on the element to the left. Then click the checkbox to add an element above
+                        the scrollpoints. The scrollpoints will now no longer be properly calculates relative to the
+                        parent until the reset button is clicked.
+                    </p>
+                </div>
+            </div>
 
             <h3>How?</h3>
             <pre class="prettyprint">&lt;p ui-scrollpoint&gt;They see me scrollin...&lt;/p&gt;</pre>
@@ -64,4 +113,4 @@ <h3>How?</h3>
                 <code>600</code> or offset from the calculated value <code>-50</code> or <code>+100</code>.</p>
         </section>
     </body>
-</html>
+</html>

dist/scrollpoint.js

@@ -1,7 +1,7 @@
 /*!
  * angular-ui-scrollpoint
  * https://github.com/angular-ui/ui-scrollpoint
- * Version: 1.0.1 - 2015-07-03T03:01:23.641Z
+ * Version: 1.0.1 - 2015-10-16T14:30:35.778Z
  * License: MIT
  */
 
@@ -60,6 +60,14 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                     }
                 }
 
+                function reset() {
+                    elm.removeClass('ui-scrollpoint');
+                    fixLimit = absolute ? attrs.uiScrollpoint : elm[0].offsetTop + shift;
+                    onScroll();
+                }
+
+                scope.$on('scrollpointShouldReset', reset);
+
                 $target.on('scroll', onScroll);
                 onScroll(); // sets the initial state
 

src/scrollpoint.js

@@ -50,6 +50,14 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
                     }
                 }
 
+                function reset() {
+                    elm.removeClass('ui-scrollpoint');
+                    fixLimit = absolute ? attrs.uiScrollpoint : elm[0].offsetTop + shift;
+                    onScroll();
+                }
+
+                scope.$on('scrollpointShouldReset', reset);
+
                 $target.on('scroll', onScroll);
                 onScroll(); // sets the initial state