1

{{tab}} should change when click on <a ng-click> unfortunately It does not change the tab value from the $index 

(function() {
  // Angular
  var app = angular.module('app', []);
  app.controller('testimonialController', function() {
    this.role = [{
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Front End Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }];
  });
})();
.position {
  position: relative;
}
.circle {
  width: 25px;
  height: 25px;
  display: block;
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 10px;
  font-size: 20px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="tab = 5">
  <p><strong>Status : {{tab}}</strong></p>
  <hr>
  <section class="timeline" ng-controller="testimonialController as testimonialList">
    <div class="position" ng-repeat="role in testimonialList.role">
      <div class="date">Role index {{$index}}</div>
      <a href class="circle" ng-click="tab = {{$index}}">+</a>
      <div class="position-description">
        <h2 class="position-title">{{role.position}}</h2>
        <h4 class="company">{{role.company}}</h4>
        <h5 class="location">{{role.location}}</h5>
        <div class="responsibilities">
          <p>{{role.description}}</p>
        </div>
      </div>
      <hr>
    </div>
  </section>
</div>
Mo.
  • 26,306
  • 36
  • 159
  • 225

2 Answers2

3

Do not declare primitive types directly on scope because they can be overridden with child scopes. For more info: What are the nuances of scope prototypal / prototypical inheritance in AngularJS? 

(function() {
  // Angular
  var app = angular.module('app', []);
  app.controller('testimonialController', function() {
    this.model = { };
    this.role = [{
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Front End Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }];
  });
})();
.position {
  position: relative;
}
.circle {
  width: 25px;
  height: 25px;
  display: block;
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 10px;
  font-size: 20px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="model.tab = 5">
  <p><strong>Status : {{model.tab}}</strong></p>
  <hr>
  <section class="timeline" ng-controller="testimonialController as testimonialList">
    <div class="position" ng-repeat="role in testimonialList.role">
      <div class="date">Role index {{$index}}</div>
      <a href class="circle" ng-click="model.tab = $index">+</a>
      <div class="position-description">
        <h2 class="position-title">{{role.position}}</h2>
        <h4 class="company">{{role.company}}</h4>
        <h5 class="location">{{role.location}}</h5>
        <div class="responsibilities">
          <p>{{role.description}}</p>
        </div>
      </div>
      <hr>
    </div>
  </section>
</div>
Community
  • 1
  • 1
Marian Ban
  • 8,158
  • 1
  • 32
  • 45
2

In your code sample, you declared tab variable right after ng-app. ng-controller makes child scope so inside of ng-controller element tab is actually $parent.tab, ng-repeat makes another child (aka isolated) scope so if you change tab in your code to $parent.$parent.tab you can actually access it. Better practice is to just move element that shows active tab inside ng-controller and attach it to controller itself. As you can see in my code sample.

(function() {
  // Angular
  var app = angular.module('app', []);
  app.controller('testimonialController', function() {
    this.role = [{
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Front End Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }];
  });
})();
.position {
  position: relative;
}
.circle {
  width: 25px;
  height: 25px;
  display: block;
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 10px;
  font-size: 20px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <section class="timeline" ng-controller="testimonialController as testimonialList">
    <p><strong ng-init="testimonialList.tab = 5" >Status : {{testimonialList.tab}}</strong></p>
    <hr>
    <div class="position" ng-repeat="role in testimonialList.role track by $index">
      <div class="date">Role index {{$index}}</div>
      <a href class="circle" ng-click="testimonialList.tab = $index">+</a>
      <div class="position-description">
        <h2 class="position-title">{{role.position}}</h2>
        <h4 class="company">{{role.company}}</h4>
        <h5 class="location">{{role.location}}</h5>
        <div class="responsibilities">
          <p>{{role.description}}</p>
        </div>
      </div>
      <hr>
    </div>
  </section>
</div>

I hope this helps. Regards.

Goran Lepur
  • 594
  • 1
  • 4
  • 15