title: recompile less to css with less.modifyVars() and angular
body: <p>I have a list of inputs, created by:</p>
  
  <pre><code>&lt;div ng-controller="MainCtrl"&gt;
  &lt;div ng-repeat="variable in variables"&gt;
      &lt;label&gt;{{ variable.slug }}&lt;/label&gt;
      &lt;input type="text" ng-model="variable.value" ng-change="variableChange()" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And a controller:</p>
  
  <pre><code>function MainCtrl($scope) {
      $scope.variables = [
          {'slug':'background', 'value':'#666'},
          {'slug':'foreground', 'value':'#999'}
      ]
  }
  </code></pre>
  
  <p>I'm using the less.js to compile the less in the browser, and I want to be able to re-compile it when the variable changes - something like inside the controller:</p>
  
  <pre><code>$scope.variableChange = function() {
      less.modifyVars({ variable.slug : variable.value });
  };
  </code></pre>
  
  <p>But I get the error:</p>
  
  <pre><code>ParseError: Unrecognised input in preview-style.less on line 102, column 1:
  102@variable.slug: variable.value;
  </code></pre>
  
  <p>But if I remove the apostrophes for the variables, I get an angular error:</p>
  
  <pre><code>Bad Argument: Argument 'MainCtrl' is not a function, got undefined
  </code></pre>
  
  <p>Can anyone help with this?</p>
  
  <p>Edit: here's the less.modifyVars() function if it helps:</p>
  
  <pre><code>less.modifyVars = function (a) {
      var b = "";
      for (var c in a) b += ("@" === c.slice(0, 1) ? "" : "@") + c + ": " + (";" === a[c].slice(-1) ? a[c] : a[c] + ";");
      less.refresh(!1, b)
  }
  </code></pre>