title: AngularJS - on ng-click display another div
body: <p>I am new to AngularJS. What I have done till now is, I have one controller and it's displaying some data. What I would like to do it, on-click on that data, display different div. What is the best way to do this ? Would like to follow MVC pattern. Also want to pass some data to another div.</p>
  
  <p>Thanks</p>
  
  <pre><code>&lt;body&gt;
  &lt;div ng-controller="Aircraft"&gt;
      &lt;div&gt;
          Search: &lt;input ng-model="search.AC"&gt;
          &lt;table style="width:500px"&gt;
              &lt;tbody style="background-color:#4db4fa; "&gt;
                  &lt;tr&gt;
                      &lt;th scope="col"&gt;AC&lt;/th&gt;
                      &lt;th scope="col"&gt;Fleet&lt;/th&gt;
                      &lt;th scope="col"&gt;FltNum&lt;/th&gt;
                      &lt;th scope="col"&gt;StnFrom&lt;/th&gt;
                      &lt;th scope="col"&gt;StnTo&lt;/th&gt;
                      &lt;th scope="col"&gt;Status&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr ng-repeat="Aircrafts in FlightAndAircraft | filter:search" align="center"&gt;
                      &lt;td&gt;&lt;button ng-click=" **** ***** HIDE THIS DIV AND DISPLAY NEXT DIV AND PASS {{Aircrafts.AC}} ***** *****" &gt;{{Aircrafts.AC}} &lt;/button&gt;&lt;/td&gt;
                      &lt;td&gt; {{Aircrafts.Fleet}}    &lt;/td&gt;
                      &lt;td&gt; {{Aircrafts.FltNum}}   &lt;/td&gt;
                      &lt;td&gt; {{Aircrafts.StnFrom}}  &lt;/td&gt;
                      &lt;td&gt; {{Aircrafts.StnTo}}    &lt;/td&gt;
                      &lt;td&gt; {{Aircrafts.Status}}   &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;table style="width:500px"&gt;
              &lt;tbody style="background-color:#4db4fa; "&gt;
                  &lt;tr&gt;
                      &lt;th scope="col"&gt;AC&lt;/th&gt;
                      &lt;th scope="col"&gt;Fleet&lt;/th&gt;
  
                  &lt;/tr&gt;
                  &lt;tr ng-repeat="Aircrafts in FlightAndAircraft | filter:search" align="center" ng-click="go(Aircrafts)"&gt;
                      &lt;td&gt; {{Aircrafts.AC}}       &lt;/td&gt;
                      &lt;td&gt; {{Aircrafts.Fleet}}    &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>