Создание горизонтальной временной шкалы с помощью angularjs

Question

Я пытался создать горизонтальную временную шкалу для перечисления достижений человека с его возрастом, используя angularjs. Я нашел эту ручку здесь: https://codepen.io/mishamean/pen/PEoWrK. Это делает аналогичную задачу, используя jquery. Я пытался сделать абсолютно похожую вещь, используя чистый angularjs. Для этого я создал новый элемент под названием

Связанный файл js:

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

app.controller('tryCtrl', function ( $scope, $http ) {
    console.log('Here as well');
})

app.directive('newsec', function () {
    'use strict';


console.log(angular.element);

return {
    restrict: 'EA',
    templateUrl: 'view.html',
    controller: function ( $http, $scope ) {
        /*
        console.log('Entered here');
        var timelines = document.getElementsByClassName('cd-horizontal-timeline');
        console.log(timelines);
        */

        $http({
            method: 'get',
            url: '../json/event.json'
        }).then(function (response) {
            $scope.events = response.data.events;
        }, function myError(response) {
            console.log('Error');
        })

        $http({
            method: 'get',
            url: '../json/timeline.json'
        }).then(function (response) {
            $scope.time = response.data.timeline;
        })

    },

}
})

Файл view.html:

  <section class="cd-horizontal-timeline" ng-controller="tryCtrl">
      <div class="timeline">
        <div class="events-wrapper">
          <div class="events">
            <ol>
              <li ng-repeat = "dt in time"><a href="" data-date="{{dt.dd}}" ng-class="{selected:$first}">{{dt.dc}}</a></li>
            </ol>

            <span class="filling-line" aria-hidden="true"></span>
          </div>
          <!-- .events -->
        </div>
        <!-- .events-wrapper -->

        <ul class="cd-timeline-navigation">
          <li><a href="" class="prev inactive">Prev</a></li>
          <li><a href="" class="next">Next</a></li>
        </ul>
        <!-- .cd-timeline-navigation -->
      </div>
      <!-- .timeline -->

      <div class="events-content">
        <ol>
          <li ng-repeat="dc in events" data-date="{{dc.dt}}" ng-class="{selected:$first}">
            <p>{{dc.p}}
            </p>
          </li>
        </ol>
      </div>
      <!-- .events-content -->
    </section>

Я застрял в нескольких местах: 1. Для решения этой проблемы я создавал фабрику, в которой есть необходимые функции для создания временной шкалы, которую затем можно было бы использовать с функцией ссылки, представленной в директиве. Но, создавая фабрику, я не могу выполнить обязательную внутреннюю привязку. То есть исходный файл имеет js, который внутренне связан с различными функциями. 2. Если я рассмотрю оригинальный кодекс, они также использовали разные функции, которые не имеют возвращаемого значения. Как мы можем создавать функции без возвращаемого значения. 3. Еще одно место, где я застрял, это то, что если я использую angular.element в директиве для ссылки на элемент для манипулирования DOM, я получаю элемент new-sec, но это всегда до того, как фактическая временная шкала была загружена через контроллер, Как я могу использовать angular.element, чтобы получить элементы после загрузки всего файла?