unStick Element failed when position of this element change

by Guillaume Seguin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdn.rawgit.com/d-oliveros/ngSticky/master/lib/sticky.js"></script>
<script src="https://cdn.rawgit.com/paulirish/matchMedia.js/master/matchMedia.js"></script>
<span>Follow the steps below :</span>
<ol>
  <li>The sticky block is hidden by default</li>
  <li>Click on 'Show the sticky block'</li>
  <li>Scroll to the bottom of the screen to stick the sticky block</li>
  <li>Click on 'Hide the sticky block'</li>
  <li>Scroll on the top of the window</li>
  <li>Finally, Click on 'Show the sticky block'</li>
  <li>The width of the sticky bloc is broken!</li>
</ol>
<div ng-controller="stickyCtrl">
  <button ng-click="toShow()">Show the sticky block</button>
  <div id="parent">
    <div class="sticky" sticky ng-hide="hide">I am sticky!</div>
    <div class="deep"></div>
  </div>
  <button ng-click="tohide()">Hide the sticky block</button>
</div>

CSS

/*
#parent{
  height: 200px;
  overflow: scroll;
}
*/
body{
  height: 200px;
}
.head{
  height: 50px;
  background-color:orange;
}
.toggling{
  height: 50px;
  background-color:yellow;
}
.sticky{
    background-color:green;
}
.deep{
    background-color:red;
    height: 650px;
}

JavaScript

'use strict';

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

app.controller('stickyCtrl', function($scope) {
    $scope.hide = true;
    $scope.toShow = function(){
        $scope.hide = false;
    };
    $scope.tohide = function(){
        $scope.hide = true;
    };
});