ng-style not updating the style attribute of div

Question

http://plnkr.co/edit/PuP3f71kCjkqgjjMkgNS?p=preview

I have an ng-style="tghov.top" on my tags-modal however it's not translating into style="top:50!important" in the markup.

this.top = { "top" : "50px !important" };

  var app = angular.module('plunker', ['ui.bootstrap'])
  .component('tagHover', {
        template: `<section class="tags-modal"
          ng-show="tghov.tag.hoverDisplay"
          ng-style="tghov.top"
          ng-mouseleave="tghov.leave()">
          <h1>Hover for: {{ tghov.tag.term }}</h1>
          Top position: {{ tghov.top }}
        </section>`,
        controller: TagHoverController,
        controllerAs: 'tghov',
        bindings : {
            tag: '<'
        }
      });

  TagHoverController.$inject = [
      '$scope'
  ];

  function TagHoverController(
      $scope) {
        
      this.top = { "top" : "50px !important" };
  }

  app.controller('MainCtrl', function($scope) {
  });

  app.component('myComponent', {
    bindings: {},
    template: `<section class="tags-view">
        <div class="tags-column">
          <h1>Tags</h1>
          <div class="tags-container">
            <ul>
              <li ng-repeat="tag in tgs.tags">
                
                <div class="tag-container-container" ng-mouseleave="tgs.leaveTag(tag)">
                  <div class="tag-container">
                    <div class="tag" ng-mouseover="tgs.tagHover(tag)">{{ tag.term }}</div>
                    <tag-hover tag="tag"></tag-hover>
                  </div>
                </div>
                
              </li>
            </ul>
          </div>
        </div>
        <div class="tags-content">
          <div class="tags-box">
            <h2>Tags Content</h2> 
          </div>
        </div>
      </section>`,
    controllerAs: 'tgs',
    controller: TagsCtrl
  });


  TagsCtrl.$inject = [
      '$scope',
      '$uibModal'];

  function TagsCtrl(
      $scope,
      $uibModal) {
      ///////////////////////////////////
      
      this.hello = "hello world";
      
      this.leaveTag = (tag) => tag.hoverDisplay = false;
      
      this.tagHover = (tag) => tag.hoverDisplay = true;
      
      this.tags = [
        { id:0, term: 'apple'},
        { id:1, term: 'butter'},
        { id:2, term: 'charlie'},
        { id:3, term: 'duff'},
        { id:4, term: 'edward'},
        { id:5, term: 'freddy'},
        { id:6, term: 'george'},
        { id:7, term: 'henry'},
        { id:8, term: 'ink'},
        { id:9, term: 'joker'},
        { id:10, term: 'kevin'},
        { id:11, term: 'leon'},
        { id:12, term: 'mary'},
        { id:13, term: 'nancy'},
        { id:14, term: 'olivia'},
        { id:15, term: 'preston'},
        { id:16, term: 'quincy'},
        { id:17, term: 'robyn'},
        { id:18, term: 'steven'},
        { id:19, term: 'teddy'},
        { id:17, term: 'ulysses'},
        { id:18, term: 'victor'},
        { id:19, term: 'winston'},
        { id:20, term: 'xavier'},
        { id:20, term: 'yvette'},
        { id:21, term: 'zander'}
      ];
  }

/* Put your css in here */

body {
  font-family: Arial, sans-serif;
}

.tags-hover-container {
    float: left;
    position: fixed;
    z-index: 101;
    left: 240px;
    margin-top: 40px;
    width: 200px;
    height: auto;
}

.tags-column {
  z-index: 1;
  float: left;
  position: relative;
  overflow-y: auto;
  margin-top: 70px;
  max-width: 230px;
  min-width: 230px;
  height: calc(100% - 165px);
}

.tags-column li {
  list-style: none;
}

.tags-container {
  overflow-y: auto;
  height: 320px;
}

.tag-container-container { float: left; position: relative; width: 100%; }

.tag-container { float: left; position: relative; }

.tags-content {
  float: left;
  background: #f0f0f0;
}

.tags-box {
  float: left;
  padding: 20px;
  width: 320px;
  height: 640px;
  background: #4169E1;
}

.tags-box h2 {
  color: #fff;
}

.tag {
  margin: 0 10px 10px 0;
  padding: 9px 10px;
  width: auto;
  color: #fff;
  background: #3D3D3D;
  border-radius: 4px;
  cursor: pointer;
  clear: both;
}

.tag:hover {
  background: #656565;
}

.tags-modal {
  float: left;
  position: fixed;
  z-index: 101;
  left: 100px;
  margin-top: -20px;
  padding: 10px;
  width: 200px;
  height: auto;
  color: white;
  background: blue;
  border-radius: 4px;
}

.tags-modal:before {
    position: absolute;
    top: -8px;
    left: 26px;
    z-index: 99;
    content: '';
    display: block;
    height: 0; width: 0;
    border-bottom: 8px solid blue;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>
    <script src="https://code.angularjs.org/1.5.4/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <my-component></my-component>
  </body>
</html>

Answer 1

I modified the ng-style to not have the !important and added the position: "absolute" property to your top property, and it appears to work now.

You don't need to worry about !important because you'll be adding to the style attribute of the html tag, which has the highest priority in the CSS.

here is the updated plunker: http://plnkr.co/edit/aOPLLSGCIongPArB2Z2p?p=preview