AngularJS how can I use ng-model for paragraph tag (take the inner value)?

Question

What I want is if <p>Green.</p> then it has style of style="color: green". If <p>Red.</p> then it has style of style="color: red".

What I have is

<p
    ng-model="please_take_my_inner_html"
    ng-style="{ color: please_take_my_inner_html == 'Green.' ? 'green' : 'red' }"
>
   Green.
</p>

This is not working. But I hope you know what I want to achieve.

Answer 1

I don't understand your use-case but it would be possible with a custom directive that's checking the html text.

But as mentioned in the comments I also wouldn't do it like this. Instead use a model for your data and your class / style and use it in your html markup.

Something like in the demo below should work or in this fiddle.

(As mentioned in the other answer ng-model can't be used here. See the docs for ngModel for possible elements.)

angular.module('demoApp', [])
 .controller('mainController', MainController)
 .directive('innerStyle',innerStyle)
  
function innerStyle() {

 return {
   link: function(scope, element, attrs) {
    //console.log(element.text())
     var style = element
       .text().trim().toLowerCase().replace('.', '');
     element.addClass(style);
    /*
     // switch also possible
     switch(element.text().trim()) {
       case 'Green.':
         console.log('grenn style');
          element.addClass('green');
          break;
        case 'Red.':
         console.log('red style');
          element.addClass('red');
          break;
      }*/
    }
  }
}

function MainController() {
 var vm = this;
  
  vm.data = {
   firstModel: {
     text: 'Green.',
      class: 'green'
    },
    secondModel: {
     text: 'Red.',
      class: 'red'
    }
  };
}

.green {
  color: green;
}

.red {
   color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl">

  <!-- with a directive that scans inner-html -->
  <h2>inner text with directive</h2>
  <p inner-style>
  Green.
  </p>
   <p inner-style>
    Red.
  </p>
  
  <!--I wouldn't do  the above, instead use a model. Something like this <br/>-->
  <h2>same with a model</h2>
  <p ng-class="ctrl.data.firstModel.class">
    {{ctrl.data.firstModel.text}}
  </p>
  <p ng-class="ctrl.data.secondModel.class">
    {{ctrl.data.secondModel.text}}
  </p>
</div>

Answer 2

We can not use ng-model with p element or any other element that doesn not accepts input from user. It will bind value of only input,select and textarea element. In short it will work with form elements.

In input element we can consider elements mentioned below.

 - input 
 - text
 - checkbox
 - radio
 - number
 - email
 - url
 - date
 - datetime
 - local
 - time
 - month
 - week