AngularJS 1.4.x

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


var app = angular
    .module('myApp', []);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.design = {
    "layout_text_color": "red",
    "layout_text_alignment": "left",
    "layout_bg_color": "yellow",
    "layout_bg_image": "test"
  }
});
app.directive("dynamicstyle", function($compile) {
  var generate_dynamic_style = function(scope) {
      console.log('why scope works and I can see design Object inside :');
      console.log(scope);
      console.log('but scope.design doesnt work !!???');
      console.log(scope.design);
      var html_result = '<style type="text/css">'; // start style
      if (scope.design.layout_bg_image !== null) {
          html_result += 'html { color: {{design.layout_text_color}}; font-size: 12pt; text-align: {{design.layout_text_alignment}}; background: {{design.layout_bg_color}} url({{design.layout_bg_image}}) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } ';
      }
      html_result += 'body { color: {{design.layout_text_color}}; font-size: 12pt; text-align: {{design.layout_text_alignment}}; } ';
      html_result += '</style>'; // end style
      return html_result;
  };
  return {
      restrict: 'E',
      replace: true,
      link: function(scope, element, attrs) {
          // this log works
          console.log(scope);
          // this log doesn't work neither
          console.log(scope.design);
          var el = $compile(generate_dynamic_style(scope))(scope);
          element.replaceWith(el);
      }
  };
});

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.7/angular.js" data-semver="1.4.7"></script>
    <script src="app.js"></script>
    <dynamicstyle></dynamicstyle>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
  </body>

</html>

/* Put your css in here */

<p>Hello {{name}}!</p>