Show/Hide onclick - angularjs

Question

This is what i'm trying to achieve.

section1 will be hidden at page load. When user clicks on Advanced, section1 should show & section2 should hide. On clicking Basic, the opposite should happen. Nothing happens when I click any of the anchor tags now. Where am i going wrong.

<div class="container" ng-init="advstatus=true">
  <a href="#" onclick="advstatus=true">Basic</a>
  <br/>
  <a href="#" onclick="advstatus=false">Advanced</a>

  <div class="section1" ng-hide="advstatus">
    ///...
  </div>
  <section ng-show="advstatus" class="section2">
   ///...
  </section>
</div>

Answer 1

In AngularJS you need to use ng-click instead of onclick.

Also, ng-init isn't supposed to be used unless you're in ng-repeat, which you are not (take a look at the Docs).

You should set up the variable in your controller:

<div ng-app ng-controller="myCtrl" class="container" >
  <a href="javascript:void(0);" ng-click="advstatus=true">Basic</a>
  <br/>
  <a href="javascript:void(0);" ng-click="advstatus=false">Advanced</a>

  <div class="section1" ng-show="!advstatus">
    Section 1
  </div>
  <section ng-show="advstatus" class="section2">
   Section 2
  </section>
</div>

Controller:

function myCtrl($scope) {
    $scope.advstatus = true;
}

JS Fiddle