отстойответ попадает в самую суть вопроса красиво. Вот некоторые дополнительные сведения....

Фильтры И Форматирования

ng-bind и ng-model оба имеют концепцию преобразования данных перед выводом его для пользователя. С этой целью, ng-bind использует фильтры, а ng-model использует форматеры.

filter (ng-bind)

С ng-bind, вы можете использовать фильтр to преобразуйте свои данные. Например,

<div ng-bind="mystring | uppercase"></div>,

или проще:

<div>{{mystring | uppercase}}</div>

отметим, что uppercase это встроенный угловой фильтр, хотя можно и создайте свой собственный фильтр.

formatter (ng-model)

чтобы создать форматер ng-model, вы создаете директиву, которая делает require: 'ngModel', который позволяет, что директивы, чтобы получить доступ к ngModel по controller. Для пример:

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$formatters.push(function(value) {
        return value.toUpperCase();
      });
    }
  }
}

тогда в вашем частичном:

<input ngModel="mystring" my-model-formatter />

это по сути ng-model эквивалент того, что uppercaseфильтр в ng-bind пример выше.

---

Парсеры

теперь, что делать, если вы планируете разрешить пользователю изменить значение mystring? ng-bind есть только один способ привязки, от модель--> view. Однако,ng-model можно связать с view-->модель что означает, что вы можете разрешить пользователю изменять данные модели, и с помощью парсер вы можете отформатировать данные пользователя в упрощенном виде. Вот как это выглядит:

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$parsers.push(function(value) {
        return value.toLowerCase();
      });
    }
  }
}

---

играть с живым plunker из ng-model formatter/parser примеры

---

Что Еще?

ng-model также имеет встроенную проверку. Просто измените ваш $parsers или

ngModel

Директива ngModel связывает input, select, textarea (или пользовательский элемент управления формой) со свойством в области.

эта директива выполняется на уровне приоритета 1.

пример Plunker

JAVASCRIPT

angular.module('inputExample', [])
   .controller('ExampleController', ['$scope', function($scope) {
     $scope.val = '1';
}]);

CSS

.my-input {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    background: transparent;
}
.my-input.ng-invalid {
    color:white;
    background: red;
}

HTML

<p id="inputDescription">
   Update input to see transitions when valid/invalid.
   Integer is a valid value.
</p>
<form name="testForm" ng-controller="ExampleController">
    <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
         aria-describedby="inputDescription" />
</form>

ngModel несет ответственность ибо:

• привязка представления к модели, которая другие директивы, такие как введите, текстовое поле или выберите требуется.
• обеспечение поведения проверки (т. е. требуется, номер, адрес электронной почты, url).
• сохранение состояния элемента управления (действительный / недействительный, грязный / нетронутый, коснулся / нетронутый, ошибки проверки).
• настройки классов, связанных с CSS на элемент (НГ-допустимый, Н-недопустимый, НГ-грязный, НГ-первозданный, НГ-тронутый, НГ-нетронутый) включающий анимации.
• Регистрация элемента управления в родительской форме.

ngBind

Атрибут ngBind указывает Angular заменить текстовое содержимое указанного HTML-элемента значением данного выражения и обновить текстовое содержимое при изменении значения этого выражения.

эта директива выполняется на уровне приоритета 0.

пример Plunker

JAVASCRIPT

angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
    $scope.name = 'Whirled';
}]);

HTML

<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>

ngBind отвечает за:

• замена текстового содержимого указанного HTML-элемента на значение данного выражения.

если вы колеблетесь между использованием ng-bind или ng-model попробуйте ответить на эти вопросы:

---

вы только нужно display данные?

• да: ng-bind(односторонняя привязка)

• нет: ng-model(двусторонняя привязка)

вам нужно персонализация контента (а не стоимость)?

• да: ng-bind

• нет: ng-model(вы не должны использовать ng-bind, где требуется значение)

является ли ваш тег HTML <input>?

• да: ng-model(вы не можете использовать ng-bind с вводом tag)

• нет: ng-bind

ng-model

директива ng-model в AngularJS является одной из самых сильных для связывания переменных, используемых в приложении с входными компонентами. Это работает как двусторонняя привязка данных. Если вы хотите лучше понять двухсторонние привязки, у вас есть входной компонент, и значение, обновленное в этом поле, должно быть отражено в другой части приложения. Лучшим решением является привязка переменной к этому полю и вывод этой переменной везде, где вы хотите для отображения обновленного значения через окно приложения.

ng-bind

ng-bind работает совсем не так, как ng-model. ng-bind - это один из способов привязки данных, используемый для отображения значения внутри html-компонента в виде внутреннего HTML. Эта директива не может быть использована для привязки с переменной, но только с содержанием элементов HTML. Infact это может быть использовано вместе с ng-model для привязки компонента к элементам HTML. Эта директива очень полезна для обновления блоки любят div, пядь, etc. с внутренним содержанием HTML.

поможет вам понять.

angular.module('testApp',[]).controller('testCTRL',function($scope)
                               
{
  
$scope.testingModel = "This is ModelData.If you change textbox data it will reflected here..because model is two way binding reflected in both.";
$scope.testingBind = "This is BindData.You can't change this beacause it is binded with html..In above textBox i tried to use bind, but it is not working because it is one way binding.";            
});

div input{
width:600px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<head>Diff b/w model and bind</head>
<body data-ng-app="testApp">
    <div data-ng-controller="testCTRL">
        Model-Data : <input type="text" data-ng-model="testingModel">
        <p>{{testingModel}}</p>
          <input type="text" data-ng-bind="testingBind">
          <p ng-bind="testingBind"></p>
    </div>
</body>

ngModel обычно используют для входных тегов для привязки переменной, которую мы можем изменить переменную из контроллера и html-страницы, но ngBind используйте для отображения переменной на странице html, и мы можем изменить переменную только из контроллера и html просто показать переменную.

мы можем использовать ng-bind с <p> для отображения, мы можем использовать сочетание клавиш ng-bind {{model}}, мы не можем использовать ng-bind с элементами управления вводом html, но мы можем использовать ярлык для ng-bind {{model}} с элементами управления вводом html.

<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
  Hello {{name}}
<p ng-bind="name"</p>