Tukukkk

I am getting the error TypeError: Cannot read property 'classList' of undefined' when I use directives to initialize Tabs(Material CSS version 1.0). I am getting this when generating dynamic tabs. Not with the static one.

Code

 var myapp = angular.module('myapp', );

    myapp.directive("mTabs", ["$timeout", function ($timeout) {

        return function (scope, element, attrs) {

            debugger;

            element.tabs();

            $timeout(function () {

                debugger;

                element.tabs();

            });

        };

    }]).

        controller('myController', function ($scope) {

            $scope.tabs = [{ link: "test1", content: "Test 1 Tab" }, { link: "test2", content: "Test 2 Tab" }, { link: "test3" ,content: "Test 3 Tab"}];

        });





<div class="row" ng-controller="myController">

    <div   class="col s12">

        <ul class="tabs" m-tabs id="dashboardTabs">

            <li  ng-repeat="x in tabs" class="tab col s3"><a href="#{{x.link}}"></a></li>

        </ul>

    </div>



    <div ng-repeat="x in tabs" id="{{x.link}}">{{x.content}}</div>



</div>

with the above code I get the error.

But with the below code no issues

<div   class="col s12">

        <ul class="tabs" m-tabs id="dashboardTabs">

            <li class="tab col s3"><a href="#test1">Test 1</a></li>

            <li class="tab col s3"><a href="#test2">Test 2</a></li>

            <li class="tab col s3"><a href="#test3">Test 3</a></li>

        </ul>

    </div>

    <div id="test1" class="col s12">Test 1</div>

    <div id="test2" class="col s12">Test 2</div>

    <div id="test3" class="col s12">Test 3</div>

Please help.