How to use js plugin in angularjs?

Question

Angular

There is a view

<div id="vl-global">	       
            <div id="ng-container" ng-view ></div>
        </div>

in which templates are displayed, in one of the templates I want the typed.js plugin to work,
I try to do it through the directive, but nothing happens

.directive('myDatepicker', function() {
   return {
        require: 'ngModel',                        
        link: function (scope, element, attrs, slideShowCtrl) {                                                                                                                  
       $(function(){
        $(".element").typed({
            strings: ["First sentence.", "Second sentence."],
            typeSpeed: 0
        });
    });                                         
  }
 }
}),

tried to do it like this but it didn't work either

.controller('updateController',['$scope',function($scope){
$scope.updates = ['This is update 1',
'This is the second update!'];
$(function(){
    $(".update-box p").typed({
      strings:$scope.updates,
      typeSpeed: 40,
      loop: true,
      backDelay: 1500,
      contentType: 'text',
      loopCount: false,
      cursorChar: " |"
    });
  });
}]);

Answer 1

Check if these elements exist in the dom before you add a plugin to them.
in simple terms:
If not:
A bad and crutch solution would be to wait for these elements to appear:

.directive('myDatepicker', function() {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, slideShowCtrl) {
            setTimeout(function() {
                $(".element").typed({
                    strings: ["First sentence.", "Second sentence."],
                    typeSpeed: 0
                });
            });
        }
    }
}),

And to be honest, one of the best ways would be to hang a specific directive on these elements. For example, this is what I used to do for the wysihtml5 editor:

.directive('wysiwygComponent', function() {
        return {
            templateUrl: 'template/partials/wysiwygComponent.html',
            restrict: 'A',
            link: function(scope, element, attrs) {
                /** Инициализируем редактор кода после появления директивы **/
                var txt = $(element).find("textarea");
                txt.wysihtml5({
                    locale: "ru-RU",
                    toolbar: {
                        "html" : true,
                    },
                    stylesheets: [],
                    events: {
                        "blur": function() {
                            scope.$apply(function() {
                                var html = txt.siblings("iframe").contents().find("body").html();
                                scope.modelModel = html;
                            });
                        }
                    }
                });
                /** следим за изменением содержимого в редакторе **/
                scope.$watch('modelModel', function(val) {
                    txt.siblings("iframe").contents().find("body").html(val);
                });
            },
            scope: {
                label:'@',
                modelModel:'='
            }
        };
    })

The model is passed through the model-model attribute.