Ng-click and md-button conflict

Question

I'm having trouble getting a link inside a MD button to load content on the page normally i just use

<a class="wordpress" href="#" ng-click="active='Wordpress'">Wordpress</a>

which then just writes the content I need with

<p ng-show="active === 'Wordpress'">Find a sample of my wordpress codeing</p>

but this doesn't work with a md button it doesnt write anything despite having the same paragragh output

<md-menu-item>
  <md-button>
    <a class="TokusatsuSeries" ng-click="active='TokusatsuSeries'">
      Tokusatsu Series/Five Year War
    </a>
  </md-button>
</md-menu-item>

<p ng-show="active === 'TokusatsuSeries'">You chose <b>{{active}}</b></p>

---

Edit tried the 2 suggestions the VM broke the code and CTR didn't work any better them my original:

<md-menu-item>
            <md-button>
                    <a class="TokusatsuSeries" 
                       ng-click="$ctrl.active='TokusatsuSeries'">Tokusatsu Series/Five Year War
                    </a>
            </md-button>
</md-menu-item>

and the paragraph to write

<p ng-show="$ctrl.active === 'TokusatsuSeries'">You chose <b>{{active}}</b></p>

Answer 1

It seems that the problem appears because one of material component creates it own scope . You should avoid this. If you're working with AngularJS components you should bind to $ctrl ie

<md-menu-item>
    <md-button>
        <a class="TokusatsuSeries" 
           ng-click="$ctrl.active='TokusatsuSeries'">Tokusatsu Series/Five Year War
        </a>
    </md-button>
</md-menu-item>

<p ng-show="$ctrl.active === 'TokusatsuSeries'">You chose <b>{{active}}</b></p>

---

Otherwise, you can use controllerAs syntax

<div ng-controller="SomeController as vm">
    <md-menu-item>
        <md-button>
            <a class="TokusatsuSeries" 
               ng-click="vm.active='TokusatsuSeries'">Tokusatsu Series/Five Year War
            </a>
        </md-button>
    </md-menu-item>

    <p ng-show="vm.active === 'TokusatsuSeries'">You chose <b>{{active}}</b></p>
</div>