Dynamically Created Scope Dependency Injection

Would a dependency injection be possible on dynamically created scopes, or will I have to review my logic?

I have the following code

  $scope.color = {
        red: 0,
        green: Math.floor(Math.random() * 255),
        blue: Math.floor(Math.random() * 255)
      };

  function compile(element){
    var el = angular.element(element);    
    $scope = el.scope();
      $injector = el.injector();
      $injector.invoke(function($compile){
         $compile(el)($scope)
      })     
  }

   $scope.setAttribute = function(){

      var h1 = document.getElementsByClassName("testee");


      alert(h1.length);

      for (var i = 0; i < h1.length; i++){
        h1[i].setAttribute("style", "padding: px");
        compile(h1[i]);
      }

    }

Works perfectly, however color.red has been defined, I would need to handle this dynamically for example

    $scope.setAttribute = function(propriedade){

    var h1 = document.getElementsByClassName("testee");


    alert(h1.length);

    for (var i = 0; i < h1.length; i++){
      h1[i].setAttribute("style", "padding: +propriedade+px");
      compile(h1[i]);
    }
    }

If the scope does not exist it automatically creates

via Felipe Duarte