title: how to unlock/enable and change opacity/transparency of a <div> with angular when some <button> is clicked
body: <p>I want to simulate an effect similar to ng-disable in buttons which disables and makes button semitransparent, but on a div.</p>
  
  <p>I'm using ionic framework (just in case).</p>
  
  <p>I have this div, I want it to have transparency/opacity to 50% and to be disabled at the beginning:</p>
  
  <pre><code>  &lt;div class="suboption"&gt;
  
      &lt;div class="description-and-dropdown-wrapper" &gt;
  
        &lt;h4&gt;{{specialtyName}}&lt;/h4&gt;
  
        &lt;div class="buttons"&gt;
          &lt;button class="button button-icon ion-ios-arrow-down"  ng-click="specialtiesPopover.show($event)"&gt;
  
            &lt;script id="popoverSpecialties.html" type="text/ng-template"&gt;
              &lt;ion-popover-view&gt;
                &lt;ion-content &gt;
                  &lt;div class="list"&gt;
                    &lt;ul&gt;
                      &lt;li class="item" ng-repeat="specialty in specialties" ng-click="specialtyClick(specialty); popover.hide()"&gt;
                        {{specialty.name}}
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/ion-content&gt;
              &lt;/ion-popover-view&gt;
            &lt;/script&gt;
          &lt;/button&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>But once a button in an another div has been clicked to make its transparency to 0% and to enable all contents inside the first div, this is the other div, So on cityClick() I want to trigger something that unlocks/enables all contents in first div and sets tranparency of first div to 0%:</p>
  
  <p></p>
  
  <pre><code>    &lt;div class="description-and-dropdown-wrapper"&gt;
  
        &lt;h4&gt;{{cityName}}&lt;/h4&gt;
  
        &lt;div class="buttons"&gt;
          &lt;button class="button button-icon ion-ios-arrow-down" ng-click="citiesPopover.show($event)"&gt;
  
            &lt;script id="popoverCities.html" type="text/ng-template"&gt;
              &lt;ion-popover-view&gt;
                &lt;ion-content &gt;
                  &lt;div class="list"&gt;
                    &lt;ul&gt;
                      &lt;li class="item" ng-repeat="city in cities" ng-click="cityClick(city)"&gt;   //NOTICE cityClick() HERE
                        {{city.name}}   
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/ion-content&gt;
              &lt;/ion-popover-view&gt;
            &lt;/script&gt;
          &lt;/button&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>I'm a newbie with angular so I just want someone to point me in the right direction to do this.</p>