AngularJS directive blocking ngModel

In an angular application, I drew a small system of tabs and in that system I implemented a directive to create the onclick events in each of the tabs. basically the project looks like this:

stylesheet.css

.-tabs{ width: 100%; display: block; margin: 0; padding: 0; }
.-tabs nav { width: auto; display: -ms-flexbox; display: flex; overflow: hidden; }
.-tabs nav div{ height: 42px; flex: 1; display: block; width: auto; float: left; }
.-tabs nav div.active label{ background:#dadada; }
.-tabs nav div label{ width: 100%; height: 42px; padding:0 10px; line-height: 42px; 
                      text-align: center; display: block; background: #d2d2d2; 
                      cursor: pointer; text-overflow:ellipsis; 
}
.-tabs nav section{ display: none; }

html

<div class="-tabs" minha-diretiva>
    <nav>
        <div class="active">
            <label>tab 1</label>
            <section>{{foo}}</section>
        </div>
        <div>
            <label>tab 2</label>
            <section>{{bar}}</section>
        </div>
    </nav>
    <div class="-tabmain"></div>
</div>

app.js

angular.module('app', [])
  .directive('minhaDiretiva', function(scope, element, attr, ctrl) {
    var el = element[0],
    mi = el.querySelectorAll('label');
    for(var i=0; i<mi.length;i++){
      mi[i].addEventListener('click',function(){            
        var a = this.parentNode,
            b = a.parentNode.querySelectorAll('div'),
            c = el.querySelector('.-tabmain');
        for (var i = 0; i < b.length; i++) {
          b[i].className = b[i].className.replace('  ', ' ');
          b[i].className = b[i].className.replace('active', ' ');
        };
        c.innerHTML = this.parentNode.querySelector('section').innerHTML;
        a.className = a.className.concat('active');
      },false);
      if( mi[i].parentNode.className.indexOf('active') > -1 ){
        el.querySelector('.-tabmain').innerHTML = mi[i].parentNode.querySelector('section').innerHTML;
      };
    };
  })
;

My problem is occurring when I update one of the ngModel's foo or bar through any function in my controller it seems that they are not updated, on the contrary, the angle can not even read them in my code block and the block shown remains the mask of ngModel. Has anyone ever seen a similar error? is there anything I can do in my directive so that after its processing I call the angular to identify these ngModel's that are inside it?