Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<div ng-controller="MyCtrl">

<div ng-repeat="item in sortedItems">
<p>New color: {{!(sortedItems[$index].color == sortedItems[$index-1].color)}}</p>
<p ng-if="sortedItems[$index].color != sortedItems[$index-1].color">Ska bara visas om true</p>
<div class="item">
    {{item.name}} - {{item.price}}
</div>

CSS

.item {
  width: 30%; 
  float: left;
  padding: 5px;
  border: 1px solid black;
  margin: 5px;
}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope, $filter) {

		var orderBy = $filter('orderBy');
    
    $scope.items = [
      {name: "Grön sak1", color: "Grön", price: 200},
      {name: "Blå sak2", color: "Blå", price: 300},
      {name: "Röd sak1", color: "Röd", price: 400},
      {name: "Grön sak2", color: "Grön", price: 100},
      {name: "Röd sak2", color: "Röd", price: 2500},
      {name: "Grön sak3", color: "Grön", price: 100},
      {name: "Blå sak4", color: "Blå", price: 600},
      {name: "Grön sak4", color: "Grön", price: 700},
      {name: "Röd sak3", color: "Röd", price: 450},
      {name: "Blå sak3", color: "Blå", price: 50},
      {name: "Röd sak4", color: "Röd", price: 10},
      {name: "Blå sak1", color: "Blå", price: 1200},
    ];
    
    $scope.sortedItems = orderBy($scope.items, ['color', 'price']);

}