Working with native javascript plugin in directive and unit test suite

I have a native javascript plugin that is wrapped in a directive and used in angular way.

Few lines of directive,

export default function () {
'use strict';
return {
    restrict: 'E',
    scope: {
        map: '=',
        options: '='
    },
    replace: true,
    template: '<div id="map" class="leaflet-map"></div>'
    link: function(scope, element, attrs) {

        //This code of native js class that 
        //is injecting svg inside given template

        scope.map = new MP.Map(scope.options);       

    }
  };
}

HTML

<mp-map options="opt" map="mapOpt"></mp-map>

Expected HTML

<div id="map"><svg>.. nodes of map .. </svg></div>

Firstly, I am trying to access mapOpt (i.e. instance of Mp.Map or binding with naitve js class in directive's link method) on init but failing to get instance of MP.Map in angular controller. Then I tried with $timeout (without any async data),so it worked.

Secondly, I wrote a unit test for directive to make sure <mp-map> is replaced by directive's template. But for that it's throwing error "Map container not found" (i.e error that native code is throwing).

Seems, my first step of defining directive is wrong.

Seeking help from Angularians.

I would appreciate prompt help.

Thanks.