Angular: Empty Fiddle

http://angularjs.org/

HTML

<div ng-controller="MyCtrl">
    <ul ng-repeat="card in cards | orderByValue">
        <li>{{card.name}} {{value(card)}}</li>
    </ul>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.filter('orderByValue', function () {
  function myValueFunction(card) {
    return card.values.opt1 + card.values.opt2;
  }

  // re: https://github.com/angular/angular.js/issues/1286#issuecomment-22193332
  return function (obj) {
    var array = [];
    Object.keys(obj).forEach(function (key) {
      obj[key].name = key;
      array.push(obj[key]);
    });
    array.sort(function (a, b) {
      return myValueFunction(b) - myValueFunction(a);
    });
    return array;
  };
});

function MyCtrl($scope) {
  $scope.cards = {
    "card1": {
      values: {
        opt1: 9,
        opt2: 12
      }
    },
    "card2": {
      values: {
        opt1: 9,
        opt2: 11
      }
    }
  };

  $scope.value = function (card) {
    return card.values.opt1 + card.values.opt2;
  }
}