ng-style and javascript object with the same named properties

Question

How do you guys deal with the situation like this:

<div ng-style='currentStyle'>

scope.currentStyle = {
   "background": "-moz-linear-gradient(top, " + colorFrom + " 0%, " + colorTo + " 100%)",
   "background": "-webkit-gradient(linear, left top, left bottom, color-stop(0%, " + colorFrom + "), color-stop(100%," + colorTo + "))",
   "background": "-webkit-linear-gradient(top,  " + colorFrom + " 0%," + colorTo + " 100%)",
   "background": "-o-linear-gradient(top,  " + colorFrom + " 0%," + colorTo + " 100%)",
   "background": "-ms-linear-gradient(top,  " + colorFrom + " 0%," + colorTo + " 100%)",
   "background": "linear-gradient(to bottom,  " + colorFrom + " 0%," + colorTo + " 100%)"
}

if seems that having javascript object with the same named keys is wrong, isn't it? Then how do I make a gradient style?

upd: I don't know, maybe there's nothing wrong with a javascript object like this (works in my browser), but coffeescript compiler complaining about code like this, says: Multiple object literal properties named ""background""

Answer 1

What if you avoided the ngStyle directive and just used:

<div style='{{currentStyle}}'></div>

That way you could create your style declaration as a string in plain CSS.

$scope.currentStyle = "background: -moz-linear-gradient(top, " + colorFrom + " 0%, " + colorTo + " 100%);"
[etc....]