title: Angular directive not aplying style
body: <p>I have a question about styles with angularJs directives. I have imported a bootstrap directive for progressbars inside my project. I'm using it inside a div class that I created.</p>
  
  <pre><code>&lt;div class="diagnostics-widget-modal"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h3&gt;SOME CONTENT&lt;/h3&gt;
     &lt;/div&gt;
     &lt;div class="modal-body"&gt;
         &lt;div class=left-workflow-area&gt;
             &lt;uib-progressbar value="55"&gt;&lt;/uib-progressbar&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I run my page the directive html is rendered correctly and that piece of code becomes the following.</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
      &lt;div class="left-workflow-area"&gt;
           &lt;div class="progressbar ng-isolate-scope" value="55"&gt;
                &lt;div class="progress"&gt;
                     &lt;div class="progress-bar" ng-class="type &amp;amp;&amp;amp; 'progress-bar-' + type" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" ng-style="{width: (percent &lt; 100 ? percent: 100) + '%'}" aria-valuetext="%" aria-labelledby="" ng-transclude="" style="width: 100%;"&gt;    &lt;/div&gt;
                &lt;/div&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want is to style the "progress" and "progress-bar" classes. I have a scss defining left-workflow-area.</p>
  
  <pre><code> .diagnostics-widget-modal {
       height: 100%;
       width: 100%;
  
      .modal-header {
          height: 71px;
          padding: 0 12px 0px 36px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
  
         .modal-close {
            width: 72px;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
      }
  
     .modal-body {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       height: 90%;
  
      .left-workflow-area {
          display: flex;
          width: 70%;
          height: 100%;
       }
  
      .right-workflow-area {
         display: flex;
         width: 30%;
         height: 100%;
       }
   }
  </code></pre>
  
  <p>I have a style file for the directive that is not being applied.</p>
  
  <pre><code>.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba (0,0,0,.1);
  }
  </code></pre>
  
  <p>If I declare that class inside the "left-workflow-area" is being applied correctly. But I want to keep this style appart because this is a directive that will be used in different parts in my app. How can I do this?</p>