Print HTML div instead of Popup

What you want to achieve is simple. Only use a variable in the scope and a simple binding for the error and only show it when it is different from an empty string.

controller

$scope.errorEducativo = '';

ServCompEdu.servicioCompEdu($scope.cedula).success(function(data){
    $scope.datosComp=data;    
})
.error(function(data){
    $scope.errorEducativo = 'Error al obtener los componentes educativos';
});

vista

<ion-list>
    <div class="row" ng-repeat="i in datosComp">
        <div class="col col-20" >
           <div ng-repeat="x in i.paralelos">
              <a class="circulo" ng-click="info(i.nom_coe,x.paralelo,i.creditos,x.dia,x.hora_inicio,x.hora_fin)">
                  {{ i.nom_coe | limitTo:1 }}
              </a>
           </div>
        </div>
        <div class="col col-80">
            <ion-item type="item-text-wrap" href="#/Gtuto/componentes/{{i.nom_coe}}">
                <h3>{{i.nom_coe}}</h3>
                <h5 ng-repeat="x in i.paralelos">PARALELO: <strong>{{x.paralelo}}</strong></h5>
            </ion-item>
            <!-- Este item solo se muestra si hay un error -->
            <ion-item ng-show="errorEducativo">
                {{errorEducativo}}
            </ion-item>
        </div>          
    </div>  
</ion-list>   

Remember to add a condition to reset the value of errorEducativo to empty string in case you are using a form to enter data.

It is possible to pass to $ionicPopup.alert() other parameters to customize the design.

You can use the template parameter to pass HTML code to it as a text string:

var alertPopup = $ionicPopup.alert({
  title: 'Error',
  template: '<p>Error al obtener los componentes educativos<p>'
});

It is also possible to pass the URL of a template to render the body of the Popup:

var alertPopup = $ionicPopup.alert({
  title: 'Error',
  templateUrl: 'templates/error.html'
});

The HTML code would then go to the template error.html .