Following Angular Code does not work in SharePoint 2013 - On my local Machine it runs perfectly:

<div ng-init="value = 'off'">
<button ng-click="value = { 'on': 'off', 'off':'on'}[value]">On/Off</button>    
{{ value }}
<h1 ng-show="value == 'on'" >Foobar1</h1>
<h1 ng-show="value == 'off'" >Foobar2</h1>  

When I click on the Button in SharePoint it shows me shortly 'foobar1', but after a second it change automatically back to 'foobar2'.

Can anybody help me on that ?


2 Answers 2


FYI, toggles are much easier with Booleans

<div ng-init="value = true" ng-click="value = !value">On/Off</div>    
<h1 ng-show="value" >Foobar1</h1>
<h1 ng-show="!value" >Foobar2</h1>  

Thanks for the Input Danny.

Found the problem - There is probably a click event on the button from SharePoint self. When you change the button to a div or span etc. then it works also in SharePoint - Here is my Code, which is working:

<div ng-init="value = 'off'">
<div ng-click="value = { 'on': 'off', 'off':'on'}[value]">On/Off</div>    
{{ value }}
<h1 ng-show="value == 'on'" >Foobar1</h1>
<h1 ng-show="value == 'off'" >Foobar2</h1>  

  • Change the button to input type="button" Dec 17, 2015 at 11:29
  • Change your ng-click to execute a function and use event.PreventDefault to stop the event bubble... stackoverflow.com/questions/5963669/… Dec 17, 2015 at 11:48
  • There is no event on the button you add yourself, the button click will be sent to all its parent elements, so you have to cancel that bubbling Dec 17, 2015 at 12:48
  • you mean in this way: "<button ng-click="value = { 'on': 'off', 'off':'on'}[value]; event.PreventDefault;">On/Off</button> ", right ?
    – SaSH_17
    Dec 17, 2015 at 13:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.