apply css on ng-click dynamically angularjs

Take this function that inverts hex colors

(source: Automatically change text color to assure readability)

and attach it to your $scope so that it's available in the view:

$scope.invertColor = function (hexTripletColor) {
    var color = hexTripletColor;
    color = color.substring(1);           // remove #
    color = parseInt(color, 16);          // convert to integer
    color = 0xFFFFFF ^ color;             // invert three bytes
    color = color.toString(16);           // convert to hex
    color = ("000000" + color).slice(-6); // pad with leading zeros
    color = "#" + color;                  // prepend #
    return color;
}

Then you use ng-style to set the background and color of each item:

ng-style="{background:item.color, 'color':invertColor(item.color)}"

See the working example here: http://jsfiddle.net/wilsonjonash/eAFVk/2/

I'm use a bit of Jonathan solution to make everything works please see here: jsfiddle

<div ng-app="app">
    <div ng-controller="myCtrl">
        <div class="btn-group" ng-repeat="item in obj">
            <button type="radio" class="btn-group btn-xs btn-group-xs" ng-style="getMyStyle(item)" ng-click="UpdateColor(item)">{{item.name}} {{item.color}}</button>
        </div>
    </div>
</div>

and JS:

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

app.controller('myCtrl', function ($scope) {


    $scope.invertColor = function (hexTripletColor) {
        var color = hexTripletColor;
        color = color.substring(1); // remove #
        color = parseInt(color, 16); // convert to integer
        color = 0xFFFFFF ^ color; // invert three bytes
        color = color.toString(16); // convert to hex
        color = ("000000" + color).slice(-6); // pad with leading zeros
        color = "#" + color; // prepend #
        return color;
    }

    $scope.obj = [{
        'id': 1,
            'color': '#ff0000',
            'name': 'final'
    }, {
        'id': 2,
            'color': '#ffff99',
            'name': 'start'
    }];

    $scope.UpdateColor = function (item) {

        item.color = $scope.invertColor(item.color);

    };

    $scope.getMyStyle = function (item) {
        var myStyle = {
            'background-color': item.color,
            color: $scope.invertColor(item.color)
        }
        return myStyle;
    }


});

In terms of displaying opposite colours, from my experience the best readability you can achieve with white/black text over any background colour. I've put some time to study this and that's what I came up with

$scope.RGB = function(colour) {
    if (colour.charAt(0) == "#") {
      colour = colour.substr(1, 6)
    }
    colour = colour.replace(/ /g, "");
    colour = colour.toLowerCase();
    var colour_defs = [{
      re: /^(\w{2})(\w{2})(\w{2})$/,
      process: function(bits) {
        return [parseInt(bits[1], 16), parseInt(bits[2], 16), parseInt(bits[3], 16)]
      }
    }, {
      re: /^(\w{1})(\w{1})(\w{1})$/,
      process: function(bits) {
        return [parseInt(bits[1] + bits[1], 16), parseInt(bits[2] + bits[2], 16), parseInt(bits[3] + bits[3], 16)]
      }
    }];
    for (var i = 0; i < colour_defs.length; i++) {
      var re = colour_defs[i].re;
      var processor = colour_defs[i].process;
      var bits = re.exec(colour);
      if (bits) {
        var channels = processor(bits);
        this.r = channels[0];
        this.g = channels[1];
        this.b = channels[2]
      }
    }
    this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r);
    this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g);
    this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b)
  }

then

myCol = $scope.RGB('#backgroundColour');
brightness = Math.sqrt(myCol.r * myCol.r * 0.299 + myCol.g * myCol.g * 0.587 + myCol.b * myCol.b * 0.114);
$scope.fontcolour = brightness < 130 ? "#FFFFFF" : "#000000";

any attempts of reversing colours are IMHO bad and often unreadable

here is a demo of inverse which I extended by my blackand white

http://jsfiddle.net/maurycyg/f9Re3/83/

You could try something like this: add a style property to the elements inside the array:

function MyCtrl($scope) {
  $scope.obj = [
      {
          'id':1,
          'color':'#ff0000',
          'name':'final',
          'style' : {
              'background-color' : ''
          }
      },
      {
          'id':2,
          'color':'#ffff99',
          'name':'start',
          'style' : {
              'background-color' : ''
          }
      }
  ];
}

then, in your view, you can do:

<div ng-app="">
    <div ng-controller="MyCtrl">
        <div class="btn-group" ng-repeat="item in obj">
            <button data-ng-click="item.style = {'background' : item.color}" data-ng-style="item.style" type="radio" class="btn-group btn-xs btn-group-xs">{{item.name}
            </button>
        </div>
    </div>
</div> 

This is a JSFiddle I created. I hope it helps.

EDIT: in Javascript you can add properties to an abject at runtime with a simple loop like this:

for(var i=0; i<$scope.obj.length; i++){
    $scope.obj[i].style = {
        'background-color' : ''
    }
}

You don't have to modify the way you retrieve data from the server (or the format of the data retrieved). Doing this loop you modify only the javascript object you work with. It is a common practice.