title: AngularJS Grunt Dist HTML "Cannot read property 'length' of undefined Used --force, continuing"
body: <p>Hi I have an AngularJS aplication created using Grunt bower and yeoman.</p>
  
  <p>I am trying do <strong>grunt serve:dist</strong> on the application. While minifying some HTML shows error and doesn't minifying even if I do <strong>--force</strong></p>
  
  <p>I have some HTML pages in my views. </p>
  
  <p><strong>application.html</strong></p>
  
  <pre><code>&lt;!-- build:js scripts/applicationctrl.js --&gt;
  &lt;script src="scripts/controllers/appln.js"&gt;&lt;/script&gt;
  &lt;!-- endbuild --&gt;
  &lt;div ng-if="view" id="application"
      class="tab-pane active"&gt;
  
      &lt;div class="box-header blue-background"&gt;
          &lt;div class="title"&gt;
              &lt;div class="icon-edit"&gt;&lt;/div&gt;
              Application Information
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;form class="form form-horizontal " id="appForm" name="appForm"
          ng-submit="saveapplication()" ng-if="update"
          style="margin-top: 1%"&gt;
          &lt;div ng-if="statusMessage!=null"
              class="alert {{alertType}} alert-dismissable"&gt;
              &lt;a class="close" data-dismiss="alert" href=""&gt;× &lt;/a&gt; &lt;i
                  class="{{statusIcon}}"&gt;&lt;/i&gt; {{statusMessage}}
          &lt;/div&gt;
          &lt;div class="groupedColumns"
              ng-if="allowed"&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label col-sm-4 " for="applicationName"&gt;Application
                          : &lt;span class="required"&gt;*&lt;/span&gt;
                      &lt;/label&gt;
                      &lt;div class="col-xs-7 controls"&gt;
                          &lt;input class="form-control input-sm inline-block"
                              data-rule-required="true" ng-model="application.name"
                              placeholder="Application Name" required="required" /&gt;
                      &lt;/div&gt;
                      &lt;div class="availability-result"&gt;
                          &lt;i id="loading" class="{{spinnerClass}}"&gt;&lt;/i&gt; &lt;span
                              class="{{msgClass}}"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label col-sm-4 " for="applicationID"&gt;Application
                          ID : &lt;/label&gt;
                      &lt;div class="col-xs-7 controls"&gt;
                          &lt;input class="form-control input-sm"
                              ng-model="application.applicationId" id="applicationID"
                              name="applicationID" placeholder="Application ID" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have another file in the same views folder.</p>
  
  <p><strong>info.html</strong></p>
  
  <pre><code>&lt;!-- build:js scripts/infoctrl.js --&gt;
  &lt;script src="scripts/controllers/info.js"&gt;&lt;/script&gt;
  &lt;!-- endbuild --&gt;
  &lt;div class="box bordered-box" ng-if="tabpage.enable"&gt;
      &lt;div class="box-content box-no-padding"&gt;
          &lt;div class="responsive-table"&gt;
              &lt;div class="box-header"&gt;
                  &lt;div class="title icon-truck"&gt;Summary&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-sm-6 no-margin-bottom"&gt;
                  &lt;label
                      class="control-label col-sm-5 col-xs-12 input-sm-attr no-padding"&gt;Active
                      : &lt;/label&gt;
                  &lt;div&gt;
                      &lt;input class"no-padding" type="checkbox" ng-model="info.isActive"
                          ng-change="enablesave()"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-2 actions"&gt;
                  &lt;button type="submit" id="infoSaveID"
                      ng-disabled="savebutton.enable" value="Save"
                      ng-click="saveInfo()"
                      class="btn btn-primary icon-ok icon-white"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="scrollable-area" style="padding-top: 5px;"&gt;
                  &lt;table class="table-condensed table table-bordered table-hover"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th class="col-size-reduce"
                                  ng-repeat="(key ,value) in infoStatus[0]"&gt;{{key}}&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr ng-repeat="row in infoStatus"&gt;
                              &lt;td class="col-size-reduce" ng-repeat="(key, value) in row"&gt;
                                  {{value}}&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I have many files too like this.</p>
  
  <p>When I do grunt serve:dist it minifies the first html page. While it shows error while minifying the info.html page</p>
  
  <pre><code>Warning: dist/views/info.html
  Parse Error: &lt;input class"no-padding" type="checkbox" ng-model="info.isActive"
                          ng-change="enablesave()"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-2 actions"&gt;
                  &lt;button type="submit" id="infoSaveID"
                      ng-disabled="savebutton.enable" value="Save"
                      ng-click="saveInfo()"
                      class="btn btn-primary icon-ok icon-white"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="scrollable-area" style="padding-top: 5px;"&gt;
                  &lt;table class="table-condensed table table-bordered table-hover"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th class="col-size-reduce"
                                  ng-repeat="(key ,value) in infoStatus[0]"&gt;{{key}}&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr ng-repeat="row in infoStatus"&gt;
                              &lt;td class="col-size-reduce" ng-repeat="(key, value) in row"&gt;
                                  {{value}}&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; Used --force, continuing.
  Warning: Cannot read property 'length' of undefined Used --force, continuing.
  </code></pre>
  
  <p>Why the first one is working fine and the second one shows error? How to solve it?</p>