Dynamically filled orderby in angularjs not using the 2nd variable that is inputted

Question

Codepen Link

(function(){
  var app = angular.module('bars',[]);
  
  app.controller('BarController',function(){
    this.bars = bars;
  });
  
  app.controller('YearController',function(){
    this.theyear = 0;
    
    this.years = years;
    
    this.setYear = function(year){
      this.theyear = parseInt(year);
    };
    
    this.isSelected = function(year){
      return this.theyear === year;
    };
  });
  
  var years = [
    {
      name: '2007',
      id: 0,
      headliner: 'Something has happened'
    },
    {
      name: '2008',
      id: 1,
      headliner: 'Something else has happened'
    }
  ];
  
  var bars = [
    {
      name: 'Wilfred Jameson',
      color: '#e23069',
      picture: 'http://www.afcb.co.uk/images/common/bg_player_profile_default_big.png',
      year: [
        {
          name:2007,
          percentage: 100,
          description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, maiores!'
        },
        {
          name:2008,
          percentage: 44,
          description: 'Test'
        }
      ]
    },
    {
      name: 'Georgina Lange',
      color: '#0088cc',
      picture: 'http://eshmyo.karatekin.edu.tr/dosyalar/image/default_profile_female.png',
      year: [
        {
          name:2007,
          percentage: 72,
          description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate iure sunt minima ea, eius?'
        },
        {
          name:2008,
          percentage: 62,
          description: 'Test2'
        }
      ]
    },
    {
      name: 'Timothy Gerbil',
      color: '#fe3021',
      picture: 'http://twiki.org/p/pub/Main/UserProfileHeader/default-user-profile.jpg',
      year: [
        {
          name:2007,
          percentage: 83,
          description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate iure sunt minima ea, eius?'
        }
      ]
    },
    {
      name: 'Lizz Abbadon',
      color: '#6C0CE8',
      picture: 'http://www.salsapartner.eu/images/anonymous_woman.jpg',
      year: [
        {
          name:2007,
          percentage: 36,
          description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate iure sunt minima ea, eius?'
        },
        {
          name:2008,
          percentage: 40,
          description: 'Test2'
        }
      ]
    }
  ];
})();

body {margin:0;}

*,*:before,*:after {
  transition:all 0.3s;
  -webkit-transition:all 0.3s;
  box-sizing:border-box;
}

.years {
  position:relative;
  float:left;
  list-style:none;
  width:100%;
  margin:0;
  padding:0;
}
.years > li {
  position:relative;
  float:left;
  margin:0 0 0 15px;
  border:1px solid #999;
  background-color:#dbdbdb;
  border-bottom:none;
  border-radius:0.5em 0.5em 0 0;
  overflow:hidden;
}
.years > li > a {
  position:relative;
  float:left;
  padding:7px 15px 2px 15px;
  color:#fff;
  text-decoration:none;
}
.years > li.active > a {
  color:#555;
  background-color:#fff;
}
.years > li > a:hover {
  background-color:#ebebeb;
  color:#fff;
}

.bars {
  position:relative;
  float:left;
  width:100%;
}

.bars .bar {
  position:relative;
  float:left;
  width:calc(100% - 20px);
  margin:10px;
  height:40px;
  margin-bottom:10px;
  border-radius:2em;
  overflow:hidden;
}
.bars .bar .mask {
  position:relative;
  float:left;
  height:100%;
  border-radius:2em;
  line-height:40px;
  padding-left:20px;
  color:#eee;
  letter-spacing:1px;
}
.bars .bar .picture {
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  height:100%;
  width:40px;
  border-radius:100%;
  overflow:hidden;
  cursor:pointer;
}
.bars .bar .picture img {
  width:100%;
}
.bars .card {
  position:relative;
  float:left;
  margin-top:10px;
  margin-left:-100%;
  width:calc(100% - 20px);
  opacity:0;
  height:0;
  transform:scaleY(0);
  -webkit-transform:scaleY(0);
  padding:0px;
  color:#eee;
  overflow:hidden;
}
.bars .card.cardin {
  padding:20px;
  margin-left:10px;
  opacity:1;
  height:auto;
  transform:scaleY(1);
  -webkit-transform:scaleY(1);
  overflow:visible;
  margin-bottom:10px;
}
.bars .card .triangle {
  position:absolute;
  z-index:-1;
  bottom:100%;
  margin-left:-40px;
  border:0px solid transparent;
  height:0;
  width:0;
}
.bars .card .triangle.cardin {
  border-width:20px;
}
.bars .card h2 {
  margin:0 0 10px 0;
}
.bars .card p {
  letter-spacing:1px;
  line-height:20px;
}

<script src="https://code.angularjs.org/1.3.2/angular.js"></script>
<html ng-app="bars">
  <body ng-controller="BarController as barCtrl">
    <h1 style="text-align:center;position:relative;float:left;width:100%;">Progress</h1>
    <div class="wrap" ng-controller="YearController as yearCtrl">
      <ul class="years">
        <li ng-repeat="year in yearCtrl.years" ng-class="{ active: yearCtrl.isSelected(year.id)}">
          <a href="#" ng-click="yearCtrl.setYear(year.id)">
            {{year.name}}
          </a>
        </li>
      </ul>
      <h3 class="headliner" ng-repeat="year in yearCtrl.years" ng-show="yearCtrl.isSelected(year.id)" style="position:relative;float:left;width:100%;text-align:center;">
        {{year.headliner}}
      </h3>
      <div class="bars" ng-repeat="bar in barCtrl.bars | orderBy:'-year[yearCtrl.theyear].percentage'">
        <div class="bar" ng-show="bar.year[yearCtrl.theyear].percentage && bar.color">
          <div class="mask" ng-style="{'background-color':'{{bar.color}}','width':bar.year[yearCtrl.theyear].percentage+'%'}">
            {{bar.name}}
            <div class="picture" ng-class="cardclass" ng-show="bar.picture" ng-click="cardclass ? cardclass = '' : cardclass = 'cardin'">
              <img ng-src="{{bar.picture}}"/>
            </div>
          </div>
        </div>
        <div class="card" ng-class="cardclass" ng-show="bar.year[yearCtrl.theyear].percentage && bar.color" ng-style="{'background-color':'{{bar.color}}'}">
          <div class="triangle" ng-class="cardclass" ng-style="{'left':bar.year[yearCtrl.theyear].percentage+'%','border-bottom-color':'{{bar.color}}'}"></div>
          <h2>{{bar.name}}</h2>
          <img ng-src="{{bar.picture}}" />
          <p style="font-weight:bold;">
            {{bar.year[yearCtrl.theyear].name}}
          </p>
          <p>
            {{bar.year[yearCtrl.theyear].description}}
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

I have been bashing my head against the table for a while trying to figure out what is causing this filter not to work.

In essence, what I am trying to achieve is to filter the bars by the percentages given in that year. As can be seen in all the other parts of the html, this method is working to do the new values, as well as animating the different widths on change etc, but for some reason, when I try to designate the specific year, it doesn't recognise the value as the actual value (I'm about 95% sure it's looking for the string of that, instead of the value).

I am fairly new to angularjs (about a day) and it has been quite an interesting experience, however, this filter has been a pain to figure out.

The example has some dummy data included.

Sorry for the longwindedness of this question, I've been having a rough couple of days.

Answer 1

You need to change your orderBy to this:

<div class="bars" ng-repeat="bar in barCtrl.bars | orderBy:'-year[' + yearCtrl.theyear + '].percentage'">

The problem is yearCtrl.theyear was being used as a string, while instead you want the value.

Here's it working: http://codepen.io/anon/pen/RNqgoO