Updating dom from javascript within angularjs

Question

I am changing the class of a button, of a button group, using javascript within angular directive.

My update is happening correctly. But the change is not reflecting on screen until i click somewhere in the page.

angular.module('test', []).
directive('selected', function() {
  return {
    link: selectedLinker,
    restrict: 'A',
    replace: false
  }

  function selectedLinker(scope, element, attribute) {
    var groupname = attribute.selected;
    groupname = 'groupname';
    element.bind('click', function() {
      var elements = document.querySelectorAll('[selected=' + groupname + ']');
      for(var i=0; i<elements.length; i++) {
        var item = elements[i];
        item.classList.remove('selected');
      }
      this.classList.add('selected');
      //element.addClass('selected');
    })
  }
});

What am I missing here. I dont want to use jquery. Thanks.

Pluker Link

Answer 1

try adding this to your css :

.btn:focus {
      background-color: inherit !important;
      color: inherit !important;
    }

Answer 2

Add this.blur() after this.classList.add('selected'); in your directive's link function to clear the bootstrap CSS properties being applied due to the button being in focus.