diff --git a/src/js/directives/ui-grid-style.js b/src/js/directives/ui-grid-style.js
new file mode 100644
index 0000000000..e3d48ce308
--- /dev/null
+++ b/src/js/directives/ui-grid-style.js
@@ -0,0 +1,48 @@
+(function(){
+// 'use strict';
+
+/**
+ * @ngdoc directive
+ * @name ui.grid.style.directive:uiGridStyle
+ * @element style
+ * @restrict A
+ *
+ * @description
+ * Allows us to interpolate expressions in `
+ I am red.
+
+
+
+ */
+
+var app = angular.module('ui.grid.style', []);
+
+app.directive('uiGridStyle', ['$interpolate', function($interpolate) {
+ return {
+ // restrict: 'A',
+ priority: 1000,
+ link: function(scope, element) {
+ var interpolateFn = $interpolate(element.text(), true);
+ if (interpolateFn) {
+ scope.$watch(interpolateFn, function(value) {
+ element[0].innerText = value;
+ });
+ }
+ }
+ };
+}]);
+
+})();
\ No newline at end of file
diff --git a/test/unit/directives/ui-grid-style.spec.js b/test/unit/directives/ui-grid-style.spec.js
new file mode 100644
index 0000000000..671bb3f434
--- /dev/null
+++ b/test/unit/directives/ui-grid-style.spec.js
@@ -0,0 +1,35 @@
+
+describe('ui.grid.style', function() {
+ var GridUtil;
+
+ beforeEach(module('ui.grid.style'));
+
+ describe('ui-grid-style', function() {
+ var element, scope, compile, recompile;
+
+ beforeEach(inject(function($compile, $rootScope) {
+ scope = $rootScope;
+ compile = $compile;
+
+ recompile = function() {
+ compile(element)(scope);
+ scope.$digest();
+ };
+ }));
+
+ it('allows style elements to have expressions', function() {
+ element = angular.element('');
+ scope.foo = '.bar { color: red }';
+ recompile();
+
+ expect(element.text()).toEqual(scope.foo);
+ });
+
+ it("doesn't affect style elements without the directive", function () {
+ element = angular.element('');
+ recompile();
+ expect(element.text()).toEqual('{{ foo }}');
+ });
+ });
+
+});
\ No newline at end of file