Change Button Text Dynamically In Angularjs

I am working with AngularJS, CSS and HTML. Here's what I'm trying to do: A button gets disabled based on the output of a certain function isPublished(). I need the hover text over

Solution 1:

It seems that you want to change the title (hover title) dynamically or on some action, that can be done specificying title attribute as ng-attr-title="{{ message }}"

You can change the title in your ngDisabled function.

$scope.isPublished = function(){
   $scope.message = "I'm disalbed";
}

var app = angular.module('myApp', []);
functionctrl($scope) {
    $scope.message = "Old Title";
    $scope.changeTitle = function(){
      $scope.message = "New Title";
    };
}

<scriptsrc="http://code.angularjs.org/1.2.23/angular.min.js"></script><divng-app="myApp"ng-controller="ctrl"><divng-attr-title="{{ message }}">Hover me</div><br/><br/>
    {{message}}
    <buttonng-click="changeTitle()">Change Hover Title</button></div>

Solution 2:

You can try something like this.

<bodyng-app="app"ng-controller="ctr"><buttontype="button"class="btn btn-primary"ng-click="disable = !disable;changeTitle();">Click</button><inputtitle="{{title}}"type="button"class="btn btn-primary"value="Publish"ng-disabled="disable"/><script>
        angular.module('app',[]).controller('ctr',function($scope){
          $scope.changeTitle = function(){
            $scope.title = $scope.disable ? 'I m disabled' : 'I m not disabled';
          }
        })
      </script></body>

Have a look into working plunker.