Affix with Bootstrap and AngularJS

<!DOCTYPE html>
<html ng-app="myApp">
  <head lang="en">
    <meta charset="utf-8">
    <title>Bootstrap-AngularJS Modal - Directive</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="controller.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css"
    rel="stylesheet">
    <style>      
      /* Sidenav for Docs
      -------------------------------------------------- */
      
      .bs-docs-sidenav {
        width: 228px;
        margin: 30px 0 0;
        padding: 0;
        background-color: #fff;
        -webkit-border-radius: 6px;
           -moz-border-radius: 6px;
                border-radius: 6px;
        -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
           -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
                box-shadow: 0 1px 4px rgba(0,0,0,.065);
      }
      .bs-docs-sidenav > li > a {
        display: block;
        *width: 190px;
        margin: 0 0 -1px;
        padding: 8px 14px;
        border: 1px solid #e5e5e5;
      }
      .bs-docs-sidenav > li:first-child > a {
        -webkit-border-radius: 6px 6px 0 0;
           -moz-border-radius: 6px 6px 0 0;
                border-radius: 6px 6px 0 0;
      }
      .bs-docs-sidenav > li:last-child > a {
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
      }
      .bs-docs-sidenav > .active > a {
        position: relative;
        z-index: 2;
        padding: 9px 15px;
        border: 0;
        text-shadow: 0 1px 0 rgba(0,0,0,.15);
        -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
           -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
                box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
      }
      /* Chevrons */
      .bs-docs-sidenav .icon-chevron-right {
        float: right;
        margin-top: 2px;
        margin-right: -6px;
        opacity: .25;
      }
      .bs-docs-sidenav > li > a:hover {
        background-color: #f5f5f5;
      }
      .bs-docs-sidenav a:hover .icon-chevron-right {
        opacity: .5;
      }
      .bs-docs-sidenav .active .icon-chevron-right,
      .bs-docs-sidenav .active a:hover .icon-chevron-right {
        background-image: url(../img/glyphicons-halflings-white.png);
        opacity: 1;
      }
      .bs-docs-sidenav.affix {
        top: 40px;
      }
      .bs-docs-sidenav.affix-bottom {
        position: absolute;
        top: auto;
        bottom: 270px;
      }
    </style>
  </head>  
  <body>
    <div class="row" ng-controller="Ctrl">
      <div class="span4 bs-docs-sidebar">
        <affix></affix>
      </div>
      <div class="span6 affix-section">
        <section id="modals" name="Modals" affix-scroll>
          <div class="page-header">
            <h1>Modals <small>bootstrap-modal.js</small></h1>
            <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
          </div>
          <h2>Usage</h2>
          <h3>Via data attributes</h3>
          <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
          <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#myModal"</span><span class="tag">&gt;</span><span class="pln">Launch modal</span><span class="tag">&lt;/button&gt;</span></li></ol></pre>
          <h3>Via JavaScript</h3>
          <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myModal'</span><span class="pun">).</span><span class="pln">modal</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span></li></ol></pre>
        </section>
        <section id="dropdown" name="Dropdowns" affix-scroll>
          <div class="page-header">
            <h1>Dropdown <small>bootstrap-dropdown.js</small></h1>
            <p>dropdown are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
          </div>
          <h2>Usage</h2>
          <h3>Via data attributes</h3>
          <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
          <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#myModal"</span><span class="tag">&gt;</span><span class="pln">Launch modal</span><span class="tag">&lt;/button&gt;</span></li></ol></pre>
          <h3>Via JavaScript</h3>
          <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myModal'</span><span class="pun">).</span><span class="pln">modal</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span></li></ol></pre>
        </section>
        <section id="tab" name="Tab" affix-scroll>
          <div class="page-header">
            <h1>Tab <small>bootstrap-tab.js</small></h1>
            <p>tab are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
          </div>
          <h2>Usage</h2>
          <h3>Via data attributes</h3>
          <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
          <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#myModal"</span><span class="tag">&gt;</span><span class="pln">Launch modal</span><span class="tag">&lt;/button&gt;</span></li></ol></pre>
          <h3>Via JavaScript</h3>
          <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myModal'</span><span class="pun">).</span><span class="pln">modal</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span></li></ol></pre>        
        </section>
        <section id="button" name="Button" affix-scroll>
          <div class="page-header">
            <h1>Button <small>bootstrap-button.js</small></h1>
            <p>button are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
          </div>
          <h2>Usage</h2>
          <h3>Via data attributes</h3>
          <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
          <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#myModal"</span><span class="tag">&gt;</span><span class="pln">Launch modal</span><span class="tag">&lt;/button&gt;</span></li></ol></pre>
          <h3>Via JavaScript</h3>
          <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myModal'</span><span class="pun">).</span><span class="pln">modal</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span></li></ol></pre>        
        </section>
        <section id="collapse" name="Collapse" affix-scroll>
          <div class="page-header">
            <h1>Collapse <small>bootstrap-collapse.js</small></h1>
            <p>collapse are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
          </div>
          <h2>Usage</h2>
          <h3>Via data attributes</h3>
          <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
          <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#myModal"</span><span class="tag">&gt;</span><span class="pln">Launch modal</span><span class="tag">&lt;/button&gt;</span></li></ol></pre>
          <h3>Via JavaScript</h3>
          <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myModal'</span><span class="pun">).</span><span class="pln">modal</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span></li></ol></pre>        
        </section>
        <div style="padding-bottom: 180px"></div>
      </div>
    </div>
  </body>
</html>

(function(angular) {
  var affixDirective = angular.module('directive.affix', []);

  var Templates = {
    affix:      
      '<ul class="nav nav-list bs-docs-sidenav affix">' +
        '<li ng-repeat="affix in affixes" id="{{affix.href}}"><a href="{{affix.href}}"><i class="icon-chevron-right"></i>{{affix.name}}</a></li>' +
      '</ul>'
  };

  affixDirective.directive('affix', ['$compile', function($compile) {
    return {
      restrict: 'E',
      replace: true, 
      transclude: true,
      template: Templates.affix,
      scope: {},
      compile: function(element, attrs, transclude) {
        var body = $('body');
        var affixes = [];       
        return {
          post: function(scope, element, attrs) {  
            scope.affixes = affixes;
            $('.affix-section', body).find('section').each(function() {
              var section = $(this);                            
              affixes.push({
                href : section.attr('id'),
                name : section.attr('name')
              });
              $compile(element)(scope);
            });
          }
        };
      }
    };
  }]);
  
  affixDirective.directive('affixScroll', ['$window', function ($window) {
    return {
      link: function (scope, element, attrs) {
        var offset;
        var buffer = 80;        
        var top = element.offset().top - buffer;
        var bottom = top + element.height() - buffer;
                
        angular.element($window).on('scroll.affix-scroll', function () {
          
          var id = element.attr('id'); 
          if (angular.isDefined($window.pageYOffset)) {
            offset = $window.pageYOffset;
          } else {
            var iebody = (document.compatMode && document.compatMode !== "BackCompat") ? document.documentElement : document.body;
            offset = iebody.scrollTop;
          }
         
          var modal = $('li#'+id);          
          if (top < offset && offset < bottom) {
            if (!modal.hasClass('active')) {
              modal.addClass('active');
            }
          } else {
            if (modal.hasClass('active')) {
              modal.removeClass('active');
            }
          }
        });
      }
    };
  }]);
})(window.angular);

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

app.controller('Ctrl', function($scope) {
  $scope.something = "something that really happend";
  
  $scope.alert = function () {
    console.log('alert confirm was clicked');  
	};
  
  $scope.confirm = function () {
    console.log('confirm confirm was clicked');
	};
    
	$scope.dialog = function () {
    console.log('dialog confirm was clicked');
	};
  
});

app.controller('SmplCtrl', function($scope) {
  $scope.todos = [{
    "name": "inicio",
    "estimate": 1,
    "done": false,
    "created_at": "2012-01-03",
    "update_at": ""}, {
    "name": "asdfasfd",
    "estimate": 2,
    "done": false,
    "created_at": "2012-01-03",
    "update_at": ""}, {
    "name": "hjjhjh",
    "estimate": 3,
    "done": false,
    "created_at": "2012-01-03",
    "update_at": ""}, {
    "name": "ytrt rtyuty rtuy",
    "estimate": 4,
    "done": false,
    "created_at": "2012-10-03",
    "update_at": ""}, {
    "name": "vbbv ghjghj",
    "estimate": 5,
    "done": false,
    "created_at": "2012-01-03",
    "update_at": ""}];
});