AngularJS Tabs with UI.Router
<p>I have a single page app with vertical tables to the left. I'm able to to click on each tab and the expected content is showing. The problem I'm having is I'm not able to programmatically change the <strong>ng-checked</strong> to "true" for the selected tab and "false" for the unselected tab. Because of this the selected tab is always on the first tab in the list of tabs. I've provided all the codes (6 files) to run this app so you can see what im talking about</p>

<p><strong>Index.html</strong> </p>

<pre><code>&lt;html  ng-app= "mainApp"&gt;
&lt;head&gt;
&lt;title&gt;OneilAndK&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" &gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;link href="css/uxcore.css" rel="stylesheet"&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"&gt;&lt;/script&gt;
        &lt;script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"&gt;&lt;/script&gt;
        &lt;script src="routing.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="verticalTab.css" rel="stylesheet"/&gt;
&lt;/head&gt;

&lt;body&gt;


&lt;div class="tabordion"&gt;


  &lt;section id="section1"&gt;
    &lt;input type="radio" name="sections" id="option1" ng-checked = true &gt;
    &lt;label ui-sref="About" for="option1"&gt;About&lt;/label&gt;
    &lt;article&gt;

        &lt;div  ui-view&gt;&lt;/div&gt;
    &lt;/article&gt;
  &lt;/section&gt;


  &lt;section id="section2"&gt;
    &lt;input type="radio" name="sections" id="option2" ng-checked = false &gt;
    &lt;label ui-sref="Knowledge" for="option2"  &gt;Knowledge&lt;/label&gt;
    &lt;article&gt;
          &lt;div  ui-view&gt;&lt;/div&gt;
    &lt;/article&gt;
  &lt;/section&gt;


  &lt;section id="section3"&gt;
    &lt;input type="radio" name="sections" id="option3" ng-checked = false &gt;
    &lt;label ui-sref="Contact" for="option3"  &gt;Contact&lt;/label&gt;
    &lt;article&gt;
          &lt;div  ui-view&gt;&lt;/div&gt;
    &lt;/article&gt;
  &lt;/section&gt;
&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>About.html</strong></p>

<pre><code>&lt;p &gt;This is my about page&lt;/p&gt;
</code></pre>

<p><strong>Contact.html</strong></p>

<pre><code>&lt;p &gt;This is my Contact page&lt;/p&gt;
</code></pre>

<p><strong>Knowledge.html</strong></p>

<pre><code>&lt;p &gt;This is my knowledge page&lt;/p&gt;
</code></pre>

<p><strong>routing.js</strong></p>

<pre><code>var app = angular.module('mainApp', ['ui.router']);

app.config(['$stateProvider','$urlRouterProvider', function($stateProvider,$urlRouterProvider){

  $urlRouterProvider.otherwise("Home.html")

  $stateProvider
    .state('Contact', {url:"/Contact",templateUrl:"Contact.html"})
    .state('Knowledge', {url:"/Knowledge",templateUrl:"Knowledge.html"})
    .state('About', {url:"/About",templateUrl:"About.html"})

  }]);
</code></pre>

<p><strong>verticalTab.css</strong></p>

<pre><code>h1 {
  color: #333;
  font-family: arial, sans-serif;
  margin: 1em auto;
  width: 80%;
}

.tabordion {
  color: #333;
  display: block;
  font-family: arial, sans-serif;
  margin: auto;
  position: relative;
  width: 80%;
}

.tabordion input[name="sections"] {
  left: -9999px;
  position: absolute;
  top: -9999px;
}

.tabordion section {
  display: block;
}

.tabordion section label {
  background: #ccc;
  border:1px solid #fff;
  cursor: pointer;
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  padding: 15px 20px;
  position: relative;
  width: 180px;
  z-index:100;
}

.tabordion section article {
  display: none;
  left: 230px;
  min-width: 300px;
  padding: 0 0 0 21px;
  position: absolute;  
  top: 0;
}

.tabordion section article:after {
  background-color: #ccc;
  bottom: 0;
  content: "";
  display: block;
  left:-229px;
  position: absolute;
  top: 0;
  width: 220px;
  z-index:1;
}

.tabordion input[name="sections"]:checked + label { 
  background: #eee;
  color: #bbb;
}

.tabordion input[name="sections"]:checked ~ article {
  display: block;
}


@media (max-width: 533px) {

  h1 {
    width: 100%;
  }

  .tabordion {
    width: 100%;
  }

  .tabordion section label {
    font-size: 1em;
    width: 160px;
  }  

 .tabordion section article {
    left: 200px;
    min-width: 270px;
  } 

  .tabordion section article:after {
    background-color: #ccc;
    bottom: 0;
    content: "";
    display: block;
    left:-199px;
    position: absolute;
    top: 0;
    width: 200px;

  }  

}


@media (max-width: 768px) {
  h1 {
    width: 96%;
  }

  .tabordion {
    width: 96%;
  }
}


@media (min-width: 1366px) {
  h1 {
    width: 70%;
  }

  .tabordion {
    width: 70%;
  }
}
</code></pre>